In fact, the first time I submitted a conference talk, I hovered over the submit button for nearly an hour. I was convinced someone else had more experience, a better résumé, or more impressive GitHub stars. But I submitted anyway. And to my surprise, it was accepted.

Since then, I’ve spoken at more than 20 conferences including API Conf Lagos, Indabax Nigeria, multiple DevFests, and Write the Docs Prague. Some of my talks include:

• Leveraging Open Banking APIs for Innovation at API Conf Lagos

• Optimizing Your JavaScript Code for Speed, Sailsconf AF 2024

• Creating Documentation for the African Audience at Write the Docs Prague

Table of Contents

1. Don’t Wait Until You Feel Ready

2. Where to Find Calls for Proposals (CFP)

3. Start With a Story, Not Just a Topic

4. How to Write Strong Proposals That Get Noticed

5. Tailor Your Proposal for Each Event

6. How to Get Better at Giving a Presentation

7. Keep Going After You Speak

8. Expect Rejections — and Keep Submitting

I have three more talks lined up for the second half of 2025.

Along the way, I have developed a system that works. Whether you’re preparing your first CFP or aiming for bigger events, here is how I approach it and what I’ve learned.

1. Don’t Wait Until You Feel Ready

If you want to submit conference talks, you’re going to have to overcome your hesitation and start where you are.

In 2022, I co-submitted a talk to Write the Docs Prague with my friend Benny Ifeanyi Iheagwara. The talk was titled “Creating Documentation for the African Audience.”

It focused on challenges like language diversity, cultural assumptions, and inconsistent internet access.

We weren’t sure a European audience would care. But we believed the message was important, so we submitted it.

It was accepted.

That session gave us a platform to discuss issues that affect millions of African developers and users. We delivered it virtually, and the feedback showed us how much it resonated.

What I learned was simple: you don’t need to be perfect. You just need to be useful and timely.

2. Where to Find Calls for Proposals (CFP)

This might seem obvious, but many people don’t know where to start. I find most of my CFPs through platforms like:

• Sessionize

• Papercall.io

• cfp.land

• LinkedIn posts by organizers

• Community Slack or Discord channels

Some CFPs are hidden in newsletters or tucked away on event websites. If there’s a conference you admire, follow it and check in regularly. Keep a calendar of deadlines. The earlier you plan, the better your submissions will be.

3. Start With a Story, Not Just a Topic

Craft a compelling narrative that resonates with audiences.

The organizers have requirements to meet. Figure out what they are looking for and build your story around it.

For example, here are some submission guidelines from a conference that outline what the conference organizers are expecting and looking for:

When I pitched “Leveraging Open Banking APIs for Innovation” to API Conf Lagos, I didn’t open with code. I started with the story of a Nigerian fintech startup struggling with outdated bank systems. That story gave the session weight.

The technical content mattered, but the narrative made it relatable.

Start by studying the Call for Proposals (CFP) carefully. Most CFPs will tell you the themes, skill levels, and audience types the event caters to. Look for phrasing like “we’re looking for real-world stories,” “new voices,” or “hands-on technical depth.” That language is a blueprint for what the organizers want.

Beyond that, look at previous years’ talks. What kind of speakers did they feature? Were the sessions deeply technical, more inspirational, or a mix?

Finally, don’t be afraid to reach out to the organizers directly. A quick message like, “Hey, I’m thinking of submitting something about open banking and fintech devs in West Africa – would that be a good fit?” can give you early feedback that steers your proposal in the right direction.

4. How to Write Strong Proposals That Get Noticed

Learn how to make your submission stand out.

A strong proposal does a few things well:

• It starts with a clear, relevant problem

• It explains why this topic matters now

• It outlines what the talk will cover

• It describes what attendees will gain

Here’s an example from my “Banking without Banks” talk that got accepted for a conference just this past May:

When you’re writing these proposalas, keep the 5 W questions (Who, What, Where, When, Why) plus the story in mind. It’s a clear and effective way to communicate the purpose and value of your talk.

1. Who is this talk for?

This talk is for developers, tech leads, and product managers building or exploring financial technology solutions. It is especially valuable for startups embedding financial services like payments, lending, or account insights into their applications. It’s also for anyone interested in API-driven innovation in emerging markets, with a particular focus on financial inclusion.

2. What is this talk about?

This talk explores how open banking APIs are creating new opportunities for innovation in financial services. It features practical strategies, technical demos, and real-world case studies that show how developers can build robust, secure, and user-centric applications – even in regions with infrastructure challenges.

3. Where is this knowledge coming from?

The talk is grounded in firsthand experience from working with fintech startups in Nigeria and across emerging markets. These insights are based on real projects, real companies, and real challenges – with live examples of how open banking APIs are already being used to solve meaningful problems.

4. When is this talk relevant?

Right now. In March 2023, the Central Bank of Nigeria (CBN) formally approved open banking regulations, making Nigeria the first African country with a legal framework for it. As more countries adopt similar regulations, the demand for embedded finance is growing. Developers must be prepared to navigate this rapidly evolving space.

5. Why Should People Care?

Open banking presents an unprecedented opportunity to unlock financial innovation. Also, brings technical, compliance, and design complexity. Developers must understand:

• What the framework enables and limits

• How to work with standardized APIs from banks and third parties

• How to manage security, compliance, and user experience in sensitive financial applications

5. Tailor Your Proposal for Each Event

Even if I’m presenting similar material, I never use the same exact abstract twice. DevFest Ajah and Google I/O Extended Ibadan have different audiences and energy.

I always reframe the content to fit the event.

Show that you understand the community and what they care about. Event organizers notice when you’ve taken time to customize your submission.

6. How to Get Better at Giving a Presentation

Your first talk may be terrible. But it’s ok – with practice and effort, you’ll get better.

Want to improve your delivery? Here's a method that works for me:

1. Pick a great talk from a past conference – something close to your topic or style.

2. Download the transcript and slides, if they’re available.

3. Record yourself delivering that exact talk as if it were your own.

4. Compare: Watch your version next to the original. Notice what works and what doesn’t – pacing, tone, energy, clarity.

5. Share your recordings with friends and ask for feedback.

This kind of deliberate mimicry isn’t copying – you’re not sharing it publicly. It’s training. Just like athletes study match footage, great speakers study other speakers. Over time, you’ll develop your own rhythm, voice, and presence.

Presenting is a skill. And like any skill, it improves with practice, feedback, and repetition.

7. Keep Going After You Speak

Leverage each talk to grow your influence and connections.

Speaking at a conference is only the beginning. After each session, I usually:

• Share my slides online. You can find mine on SpeakerDeck.

• Post a recap on LinkedIn or Twitter

• Thank the organizers publicly

• Connect with attendees who reach out

This helps you build momentum and expand your network. After my TensorFlow talk at Indabax, I posted a follow-up summary. That single post led to an invitation to speak at another community event.

8. Expect Rejections — and Keep Submitting

Not every submission gets accepted. I’ve had proposals sit in “in evaluation” forever and never hear back. Some were outright rejected. My talk on using SVGs to visualize election data was one I believed in deeply. Still, it never made it into any lineup.

That’s normal.

Rejection is not a judgment of your worth. It doesn’t mean your idea is weak or your voice is not needed. Conferences have limited slots, and even strong proposals get turned down.

But here’s the truth:

If your talk was rejected, accept yourself anyway. 😊

• You already have the speaker – you

• You already have the content – your proposal

• You may not have the audience yet – create one

• Set your own stage – YouTube, LinkedIn, Twitter, Dev.to

That talk you prepared? Present it.

Publish the content. Record a video. Host a Twitter Space. Turn it into a blog post or a mini-course. Accept your own talk. And then try again.

Conclusion

Sharing your ideas on stage can feel intimidating, but it’s also one of the most rewarding ways to grow. You don’t need to be the most experienced speaker to make an impact. You just need to start.

So take that first step. Hit submit. Your story might be exactly what someone in the audience needs to hear.

There are various ways to design web applications, including GraphQL, SOAP, Falcor, gRPC, WebSockets, and Serverless Functions, with REST being the most popular (according to the 2021 State-of-API survey by Postman). And at the heart of all these architectures is HTTP.

What to Learn Along with HTTP

To understand HTTP, it is helpful to have a basic understanding of the following concepts:

1. Networking: Knowledge of how computers communicate with each other over networks is essential for understanding HTTP. This includes concepts such as IP addresses, DNS, and routing.
2. Web architecture: HTTP is a key part of web architecture, so understanding how web applications and websites are built can help you understand HTTP better. This includes concepts such as HTML, CSS, and JavaScript.
3. Server-side programming: HTTP is used to communicate between web browsers and servers, so understanding how servers work and how to build server-side applications can help you understand how HTTP works.
4. Client-side programming: HTTP is also used to communicate between web browsers and client-side applications, so understanding how to build client-side applications using JavaScript can also be helpful.

What to Expect in This Article

• How the HTTP protocol works.
• How to make network requests with Chrome and Postman.
• How to upload data with the HTTP POST method in Postman.

By the end of the article, readers should have a basic understanding of HTTP, as well as the tools and resources available for testing and troubleshooting applications.

Table of Contents

• Introduction to HTTP
• What is the HTTP Request-Response Cycle?
• How to Create HTTP Requests
• What is an HTTP Request URL?
• What Are HTTP Request Methods?
• What Are HTTP Request Headers?
• What is an HTTP Request Body?
• What is an HTTP Response?

Introduction to HTTP

HTTP (Hypertext Transfer Protocol) is a protocol used for exchanging information over the internet. HTTP is like the delivery system for information on the internet. It makes sure information goes from one place to another, like how ships carry goods across the ocean. It's the foundation of the World Wide Web.

HTTP is what makes the internet work. It's a way for web browsers and servers to talk to each other and send things like web pages back and forth. It's important for people who build websites and web applications to know how it works.

Without HTTP, it would be difficult to imagine how the internet would work. There would be no web pages, no URLs, and no hyperlinks. Instead, users would need to know the exact IP address of the server hosting the information they want to access, and they would need to use a low-level protocol like TCP/IP to transfer data.

What is the HTTP Request-Response Cycle?

Communication in HTTP centers around a concept called the Request-Response Cycle.

The request-response cycle is the process by which a client (such as a web browser or a mobile app) communicates with a server to retrieve resources or perform actions. The cycle involves several steps:

1. The client initiates a request to the server by sending an HTTP request message, which contains information such as the requested resource and any additional parameters.
2. The server receives the request message and processes it, using its resources to generate a response message.
3. The server sends the response message back to the client, which typically contains the requested resource (such as a web page) and any additional information or metadata.
4. The client receives the response message and processes it, usually by rendering the content in a web browser or displaying it in an app.
5. The client may initiate additional requests to the server, repeating the cycle as needed.

How to Create HTTP Requests

To create a valid HTTP request, you need the following:

• A URL.
• The HTTP method.
• A list of headers (request headers).
• The request body.

Here's an example of an HTTP request header, with three lines:

GET /watch?v=8PoQpnlBXD0 HTTP/1.1
Host: www.youtube.com
Cookie: GPS=1; VISITOR_INFO1_LIVE=kOe2UTUyPmw; YSC=Jt6s9YVWMd4

1. The first line specifies the HTTP method, path, and protocol version. In this case, it is a GET request for the video located at the path /watch?v=8PoQpnlBXD0 using the HTTP/1.1 protocol.
2. The second line specifies the host of the website, which is www.youtube.com.
3. The third line contains a cookie header, which is used for sending and storing small pieces of data on the client side. In this case, the cookie header contains three values: GPS=1, VISITOR_INFO1_LIVE=kOe2UTUyPmw, and YSC=Jt6s9YVWMd4. These values can be used by YouTube to track and personalize the user's experience.

What is an HTTP Request URL?

When a web browser attempts to access an image on the internet, it sends a request to the server using a URL. This URL is unique and points to a specific resource on the server.

A resource can be anything that has a name and can be accessed with a unique identifier like a user, product, article, document, or image. You can think of resources as nouns.

What Are HTTP Request Methods?

The request method tells the server what kind of action the client wants the server to take. The most common methods are:

What Are HTTP Request Headers?

HTTP request headers are additional pieces of information that are sent by the client as part of an HTTP request. They have a name/value format. That is:

Name: Value

These headers provide context and additional instructions to the server, which can be used to process the request or customize the response.

Here's an example of an HTTP request header:

GET /api/data HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36
Accept: application/json
Accept-Language: en-US,en;q=0.5
Authorization: Token abc123
Cache-Control: no-cache
Connection: keep-alive
Referer: https://www.google.com/
Pragma: no-cache

In this example, the GET method is used to send a request to the /api/data endpoint on the example.com server using HTTP/1.1 protocol. The request includes ten headers:

What is an HTTP Request Body?

In HTTP, the request body is the data that is sent from the client to the server as part of an HTTP request. The example below shows how to upload an image to the Cat API Server:

And here's what the request looks like:

POST /v1/images/upload HTTP/1.1
Host: api.thecatapi.com
x-api-key: API_KEY
Content-Length: 232
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; filename="/C:/Users/USER/Downloads/cat1.jpg"
Content-Type: image/jpeg

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW--

The request includes these headers:

1. Host: This header specifies the hostname of the server that the client is trying to connect to.
2. Content-Type: The request is uploading an image file named cat1.jpg using a type of data called multipart/form-data. The image is in JPEG format and its content is included in the request body.
3. x-api-key: This header provides an API key for authentication purposes.
4. Content-Length: This header specifies the length of the request body in bytes. The value of this field is 232.

When the server receives this request, it will parse the request body and use it to create a new entry in the Cat API database. The server will then return a response that includes information about the new entry, such as the image URL and the database ID.

What is an HTTP Response?

An HTTP response is the message that a server sends back to a client in response to an HTTP request. It usually consists of a status line, headers, and a message body:

HTTP/1.1 200 OK
Date: Sun, 28 Mar 2023 10:15:00 GMT
Content-Type: application/json
Server: Apache/2.4.39 (Unix) OpenSSL/1.1.1c PHP/7.3.6
Content-Length: 1024

{
    "name": "John Doe",
    "email": "johndoe@example.com",
    "age": 30,
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "state": "CA",
        "zip": "12345"
    }
}

The status line contains the HTTP version, a status code indicating the outcome of the request, and a corresponding message.

The headers provide additional information about the response, such as the content type of the message body or the date and time that the response was sent.

The message body contains the actual response data, such as HTML, JSON, or XML content.

Some common HTTP status codes include:

Here's an example of a JSON response from the Cat API:

{
    "id": "ErDd1JRRT",
    "url": "https://cdn2.thecatapi.com/images/ErDd1JRRT.jpg",
    "width": 4282,
    "height": 6424,
    "original_filename": "cat1.jpg",
    "pending": 0,
    "approved": 1
}

This is a JSON response from a Cat API request that appears to provide metadata about an image that has been uploaded or retrieved from the API. Here's what each field means:

• id: A unique identifier for the image.
• url: The URL where the image can be accessed.
• width: The width of the image in pixels.
• height: The height of the image in pixels.
• original_filename: The original name of the file that was uploaded.
• pending: A flag indicating whether the image is still being processed by the API.
• approved: A flag indicating whether the image has been approved for public use by the API.

Conclusion

HTTP (Hypertext Transfer Protocol) is a protocol used for exchanging information over the internet. It forms the foundation of the World Wide Web and allows communication between web browsers and servers.

This article is a short introduction to HTTP. If you are interested in learning more, check out these textbook recommendations:

• "HTTP: The Definitive Guide" by David Gourley and Brian Totty - This book is widely regarded as the authoritative guide to HTTP. It covers the protocol in-depth and provides detailed information on its features and implementation.
• "HTTP Pocket Reference" by Clinton Wong - This book provides a concise and portable reference to the HTTP protocol. It covers the essentials of the protocol and is a great resource for developers who need quick access to HTTP information.
• "Web Performance Daybook Volume 2: Techniques and Tips for Optimizing Web Site Performance" edited by Stoyan Stefanov - This book is a collection of essays and articles on web performance, including a section on HTTP optimization. It provides practical advice on how to optimize HTTP for faster and more efficient web performance.

You can use it to control what content is rendered and when, and it improves user experience, simplifies your code, and helps you create more flexible and adaptable components.

Code Sample

• The code in this article can be found here.
• The examples used in this article are inspired by The 100 Premier League Goals Quiz on the BBC.

Prerequisites

Before learning about React component rendering, it is important to have a basic understanding of HTML, CSS, and JavaScript.

• You should also have a basic understanding of React itself, including its fundamental concepts such as state, props, and lifecycle methods.
• Additionally, it is important to understand the concept of virtual DOM and how it works in React, as it is closely related to component rendering.

What You Will Learn In This Article

• How to return different JSX depending on a condition.
• How to conditionally include or exclude a piece of JSX.
• Common conditional syntax shortcuts you’ll encounter in React codebase.

About The Demos

In each demo that you'll see below:

• I show the demo video of what I'll show you how to create,
• then I show the code that achieves what is in the video,
• and finally, I explain the code.

Table of Contents

1. What is React conditional rendering?

2. Define React conditional rendering and how it works

3. Why conditional rendering is necessary in React applications

4. How to implement React conditional rendering

5. The ternary operator and the && operator

6. Code examples for each method

7. How to manage application state for conditional rendering

8. How application state can be used to control when content is rendered.

9. How to use the useState hook to manage state for conditional rendering.
10. Demo 1 - Login Logout

11. Demo 2 - How To Play Button

12. Advanced: How to Use Props to Cause React Conditional Rendering

13. Rendering components based on props

14. Demo 3 - Component ABC

15. Demo 4 - Start Quiz

16. Further Reading

What Is React Conditional Rendering?

In React, conditional rendering is the process of displaying different content based on certain conditions or states. It allows you to create dynamic user interfaces that can adapt to changes in data and user interactions.

In this process, you can use conditional statements to decide what content should be rendered.

Why Conditional Rendering is Necessary in React Applications

There are several reasons why you might want to use conditional rendering in your React applications:

1. Improved User Experience: Conditional rendering allows you to create dynamic user interfaces that adapt to changes in data and user interactions. By showing and hiding content based on the user's actions or the application state, you can create a more intuitive and engaging user experience.
2. Improved Performance: By conditionally rendering content, you can avoid rendering unnecessary components and improve the performance of your application. This is particularly important in larger applications where unnecessary rendering can lead to performance issues.
3. Simplified Code: Conditional rendering can help you simplify your code and make it more readable. By using conditional statements to decide what content should be rendered, you can avoid duplicating code and create more modular components.
4. Flexibility: Conditional rendering allows you to create more flexible and customizable components. By rendering different content based on the application state, you can create components that can be used in different contexts and adapt to different user interactions.

How to Implement React Conditional Rendering

In React, there are different ways to conditionally render content based on the state of a component or other conditions. Two common ways are using the ternary operator and the && operator.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}
    </div>
  );
}

In the above code, we used the ternary operator isLoggedIn ? ... : ... to conditionally render the message depending on whether the user is logged in or not.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

In the above code, we used the && operator to conditionally render the message if isLoggedIn is true.

Both of these methods are effective for conditionally rendering content in React. Which one to use often comes down to personal preference or the specific use case.

The ternary operator may be more useful when there are multiple conditions to check, while the && operator can be simpler and more concise when there is only one condition.

How to Manage Application State For Conditional Rendering

In React, the application state can be used to control when and how content is rendered. The application state is a central repository of data that is used by the application to render the user interface. When the application state changes, React re-renders the components that depend on that state.

One way to use the application state to control rendering is to conditionally render components based on the state. For example, if you have a component that should only be displayed when a certain condition is met, you can use the application state to control when the component is rendered.

Another way to use the application state to control rendering is to pass state variables down to child components as props. This allows child components to render content based on the state of the parent component.

Here is an example of how you can use the application state to control rendering in React:

Demo 1 - Login Logout

import React, { useState } from "react";

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>Welcome Back!</h1>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <h1>Please Login</h1>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
};

export default App;

In this example, we have a component App that renders different content based on the isLoggedIn state. Initially, isLoggedIn is set to false using the useState hook.

When the user clicks on the "Login" button, the handleLogin function is called, which sets the isLoggedIn state to true. Similarly, when the user clicks on the "Logout" button, the handleLogout function is called, which sets the isLoggedIn state to false.

The return statement of the App component uses a ternary operator to render different content based on the value of isLoggedIn. If isLoggedIn is true, it renders a welcome message and a "Logout" button. If isLoggedIn is false, it renders a message asking the user to login along with a "Login" button.

This example demonstrates how you can use conditional rendering to create dynamic user interfaces that can adapt to changes in the application state.

By using the useState hook to manage the isLoggedIn state and conditional statements to decide what content should be rendered, we can create a simple login/logout system that changes the content of the page based on the user's authentication status.

Demo 2 - Build a How to Play Button

Folder Structure for How To Play Component

import React, { useState } from "react";

import "./style.css";

const HowToPlay = () => {
  const [showRules, setShowRules] = useState(false);

  const toggleRules = () => {
    setShowRules(!showRules);
  };

  return (
    <div>
      <button className="flat-black-button" onClick={toggleRules}>
        How to Play
      </button>
      {showRules ? (
        <div>
          <p className="flat-black-button-content">
            To get under way, click 'Start'. Once you have started the quiz,
            type an answer into the box and either hit enter or click the submit
            button. If you are right, it will fill in the correct slot in the
            table. Keep entering more answers until you've successfully
            completed the quiz - or the timer runs out. If you do not want to
            play any more, just hit the 'Give up!' button. You can then reveal
            the answers you missed - or have another go.
          </p>
        </div>
      ) : null}
    </div>
  );
};

export default HowToPlay;

This component displays a "How to Play" button and shows the game instructions when the button is clicked.

Let's break down the code:

• We use the useState hook to create a state variable showRules and its setter function setShowRules, initialized to false. This state toggles the display of the game instructions when the button is clicked.
• The toggleRules function is called when the "How to Play" button is clicked, which toggles the showRules state using setShowRules.
• The return statement displays the "How to Play" button using a button element, which has a class name of "flat-black-button". It also conditionally displays the game instructions if showRules is true.
• We display the game instructions using a paragraph element, which has a class name of "flat-black-button-content".
• Finally, we export the HowToPlay component as the default export of the module.

You can use this component in other parts of the application where the "How to Play" button is needed. When the button is clicked, the game instructions will be displayed or hidden based on the current state of showRules.

Advanced: How to Use Props to Cause React Conditional Rendering

Component A,B, and C are children of App

The above diagram shows how a parent component named "App" communicates, indicated with a black line, with its child components, A, B, and C.

Component A needs to talk to components B and C, so it sends a message, indicated by the red line, to App using "props". App then passes that message down to B and C using their own "props".

Demo 3 - Component ABC

import "./App.css";

import React, { useState } from "react";

function App() {
  return (
    <div>
      <A />
    </div>
  );
}

function A() {
  const [showB, setShowB] = useState(false);
  const [showC, setShowC] = useState(false);
  const [text, setText] = useState("");

  const handleInputChange = (event) => {
    setText(event.target.value);
    setShowB(true);
    setShowC(true);
  };

  return (
    <div className="App">
      <input type="text" onChange={handleInputChange} />
      {showB && <B text={text} />}
      {showC && <C text={text} />}
    </div>
  );
}

function B(props) {
  const { text } = props;
  return <h1>Component B - {text.toUpperCase()}</h1>;
}

function C(props) {
  const { text } = props;
  return <h1>Component C - {text.toLowerCase()}</h1>;
}

export default App;

In this example, the A component has three state variables: showB, showC, and text. When the input field value changes, the handleInputChange function is called and based on the input field value, the text state variable is updated and showB and showC state variables are set to true.

The B and C components are functional components that receive the text prop as input and render the text in different ways – B component renders the text in uppercase, while C component renders the text in lowercase.

The && operator is used to conditionally render the components based on their respective state variables.

Let see how this concepts is used in a product app.

Demo 4 - Start Quiz

Demo 4 is another version of the last example.

Clicking the StartQuiz's button will trigger the Timer and populate the PlayerNameTable

When the user clicks the "StartQuiz" button, a Timer begins counting down, and a signal is sent to populate the PlayerNameTable.

Timer Component

import React, { useEffect } from "react";
import { useTimer } from "react-timer-hook";

const Timer = ({ expiryTimestamp, shouldTimerStart }) => {
  const { seconds, minutes, start, reset } = useTimer({
    expiryTimestamp,
    autoStart: false,
  });
  useEffect(() => {
    if (shouldTimerStart) {
      start();
    }
  }, [shouldTimerStart]);

  return (
    <div>
      {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
    </div>
  );
};

export default Timer;

This is a React component that uses the useTimer hook from the react-timer-hook library to create a countdown timer. Let's break it down:

1. Import the necessary dependencies: React and useTimer from the react-timer-hook library.
2. Define the Timer component, which takes two props: expiryTimestamp and shouldTimerStart.
3. Destructure the seconds, minutes, start, and reset properties from the useTimer hook. The useTimer hook takes an options object with an expiryTimestamp property that specifies the time at which the timer should expire, and an autoStart property that specifies whether the timer should start automatically when the component mounts.
4. Use the useEffect hook to start the timer when shouldTimerStart changes. The useEffect hook takes a callback function that runs after every render, and an array of dependencies that determines when the callback should run. In this case, the callback runs whenever shouldTimerStart changes.
5. Render the timer using the minutes and seconds properties, with a conditional statement that adds a leading zero to the seconds when they are less than 1o.
6. Export the Timer component as the default export of the module.

PlayerNameTable

import React, { useState, useEffect } from "react";

import "./style.css";

const PlayerNameTable = ({ trigger }) => {
  const data = require("../data/League100.json");
  console.log(data);

  const [shouldShowData, updateShouldShowData] = useState(false);

  useEffect(() => {
    if (trigger) {
      updateShouldShowData(trigger);
    }
  }, [trigger]);

  return (
    <table>
      <thead>
        <tr>
          <th>Rank</th>
          <th>Goals</th>
          <th>Clubs</th>
          <th>Player</th>
        </tr>
      </thead>
      <tbody>
        {shouldShowData ? (
          data.sort().map((player, index) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{player.goals}</td>
              <td>{player.clubs}</td>
              {/* <td>{player.name || player.player}</td> */}
            </tr>
          ))
        ) : (
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        )}
      </tbody>
    </table>
  );
};

export default PlayerNameTable;

This is a React component that renders a Premier League table. Let's break it down:

1. Import the necessary dependencies: React, useState, and useEffect.
2. Import the style.css file, which presumably contains CSS styles for the table.
3. Define the PlayerNameTable component, which takes one prop: trigger.
4. Load the data for the Premier League table from a JSON file using require. The JSON data contains information about players, including their rank, number of goals, club, and name.
5. Use the useState hook to define a state variable shouldShowData, which determines whether the data should be shown in the table or not. By default, it is set to false.
6. Use the useEffect hook to update the shouldShowData state variable whenever the trigger prop changes. This allows the parent component to control when the data is shown in the table.
7. Render the table using the table, thead, tbody, and tr HTML elements, along with the th and td elements for the table headers and data cells.
8. Use a conditional statement to determine whether to show the data or an empty table. If shouldShowData is true, sort the data array by rank and map over it to render each player's data as a table row. If shouldShowData is false, render an empty table row.
9. Export the PlayerNameTable component as the default export of the module.

StartQuiz

import React, { useState } from "react";
import "./style.css";

function Quiz({ trigger }) {
  const [isStarted, setIsStarted] = useState(false);
  const [answer, setAnswer] = useState("");

  const handleStartClick = () => {
    setIsStarted(true);
    trigger(true);
  };

  const handleResetClick = () => {
    setIsStarted(false);
    trigger(false);
  };

  const handleSubmitClick = () => {
    // Do something with the answer, e.g. validate it
  };

  return (
    <div>
      {isStarted ? (
        <div>
          <input
            type="text"
            value={answer}
            onChange={(e) => setAnswer(e.target.value)}
          />
          <button className="submit-button" onClick={handleSubmitClick}>
            Submit
          </button>
          <button className="reset-button" onClick={handleResetClick}>
            Reset
          </button>
        </div>
      ) : (
        <button className="start-button" onClick={handleStartClick}>
          Start Quiz
        </button>
      )}
    </div>
  );
}

export default Quiz;

This is a React component that represents a simple quiz. Here's what it does:

1. Import the necessary dependencies: React and useState.
2. Import the style.css file, which presumably contains CSS styles for the quiz.
3. Define the Quiz component, which takes one prop: trigger.
4. Use the useState hook to define two state variables: isStarted, which determines whether the quiz has been started or not, and answer, which stores the user's answer to the quiz question.
5. Define three functions to handle user events: handleStartClick, handleResetClick, and handleSubmitClick.
6. In the handleStartClick function, set the isStarted state variable to true and trigger the trigger prop to inform the parent component that the quiz has started.
7. In the handleResetClick function, set the isStarted state variable to false and trigger the trigger prop to inform the parent component that the quiz has been reset.
8. In the handleSubmitClick function, do something with the user's answer, such as validating it against the correct answer.
9. In the return statement, render the quiz based on whether it has been started or not. If isStarted is true, render an input field for the user's answer, along with a "Submit" button and a "Reset" button. If isStarted is false, render a "Start Quiz" button.
10. Export the Quiz component as the default export of the module.

Parent App Component

import "./App.css";

import HowToPlay from "./HowToPlay";
import ScoreCounter from "./ScoreCounter";
import Timer from "./Timer";
import Table from "./Rank";
import PremierLeagueTable from "./Rank/index2";
import Quiz from "./Quiz";

import { useState, useEffect } from "react";

function App() {
  const [hasQuizStarted, updateHasQuizStarted] = useState(null);

  function startTimer(status) {
    updateHasQuizStarted(status);
  }

  const time = new Date();
  time.setSeconds(time.getSeconds() + 300);
  return (
    <div className="App">
      <h1>Can you name the players with 100 Premier League goals?</h1>
      <HowToPlay></HowToPlay>
      <div className="place_edges">
        <ScoreCounter></ScoreCounter>
        <Timer expiryTimestamp={time} shouldTimerStart={hasQuizStarted}></Timer>
      </div>
      <Quiz trigger={startTimer}></Quiz>
      <PremierLeagueTable trigger={hasQuizStarted}></PremierLeagueTable>
    </div>
  );
}

export default App;

React application that renders a quiz for Premier League players with 100 goals. The application includes components for displaying instructions, keeping track of the score and time, and rendering the quiz and the Premier League player table.

The startTimer function is passed as a prop to the Quiz component, which is called when the user starts the quiz. This updates the state of the hasQuizStarted variable, which is then passed to the Timer and PremierLeagueTable components to start the timer and render the player table.

Further Reading

Conditional rendering is an important concept in React that allows you to render different content based on a certain condition. Here are some resources that can help you further understand conditional rendering in React:

1. Official React documentation on conditional rendering: https://react.dev/learn/conditional-rendering
2. "Conditional Rendering in React" by Robin Wieruch: https://www.robinwieruch.de/conditional-rendering-react

The scalability, small file size, and accessibility of SVG images make this format a popular choice among designers and developers.

Maps are a powerful tool for data visualization, providing a visual representation of data that can help viewers understand patterns and relationships that may not be evident in other types of visualizations.

In this article, you will learn how to make interactive maps using HTML and CSS. These maps will remain light-weight because we'll be using SVGs.

If you have basic knowledge of HTML and CSS you'll be able to understand this tutorial.

Here's what we'll cover:

I. Introduction

• What Is an SVG Map?
• What Are the Benefits of an SVG Map?

II. How to Set Up the HTML File

• How to Create the Basic HTML Structure
• How to Import the SVG Map File
• How to Set Up the div Container for the Map

III. How to Add Interactivity with CSS

• How to Style the SVG Map
• How to Add Hover Effects
• How to Add Click Effects

IV. How to Add Functionality

• How to Link Areas of the Map to External Webpages

V. Conclusion

• Recap of Steps to Make a Clickable SVG Map
• Final Thoughts and Suggestions for Further Customization

What Is an SVG Map?

SVG maps are vector-based, meaning that the map elements are defined by mathematical equations rather than pixels. This allows you to scale them up or down without losing quality.

What Are the Benefits of an SVG Map?

Some benefits of using SVG maps include:

1. Scalability: SVG maps can be scaled up or down without losing quality, which makes them ideal for use in responsive web design or for printing at different sizes.
2. Customizability: SVG maps can be easily customized to suit specific needs, such as changing colors, adding labels, or modifying the size and shape of map elements.
3. Interactivity: SVG maps can be made interactive through the use of JavaScript and CSS, allowing viewers to hover over or click on specific elements to see more detailed information.
4. Accessibility: SVG maps can be read by assistive technologies such as screen readers, making them more accessible to people with disabilities.
5. Cross-platform compatibility: SVG maps can be displayed on a wide range of devices and browsers, making them a versatile choice for web-based applications.

Example Of SVG Maps In the Wild

Stears and The BBC used SVG Maps to visualize election data. Users can click on a region to see the distribution of ballots cast. See here for more info.

What Are We Building?

In this tutorial, we are building Tour Afrique, an interactive map of Africa.

It has 2 features:

• Users can hover to see the name of a country.
• Users can click on a country to see more information on Wikipedia.

How to Build Our Interactive Map of Africa

1. Get the SVG Map of Africa

You can create an SVG map using vector graphics software such as Adobe Illustrator or Inkscape, or with code using libraries such as D3.js or Leaflet.

You can also download SVG maps from Wikipedia using a creative-commons license. Click here for the map we'll use in this tutorial.

2. Create the basic HTML structure

We need a basic HTML structure, which will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span> Tour Afrique </span>
</body>
</html>

This HTML will give us the following result so far:

<!DOCTYPE html>

3. Import the SVG map file

To import an SVG map file to an HTML document, you can use the <object>, <img>, or <svg> tag.

We'll do so using the <svg> tag:

First, open your HTML file in a text editor. Then add the downloaded SVG map to the section where you want it to appear:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      >
        ... all the country paths are here ...
      </svg>
    </section>
  </body>
</html>

<!DOCTYPE html>

4. Nest each path in an anchor tag

There are several path tags in our SVG. Each of them describes a country. We want to hover on each country to see the name of the country. And on clicking that country, we should be taken to its Wikipedia page.

<a xlink:title="Mali" xlink:href="https://en.wikipedia.org/wiki/Mali" target="_blank" id="malic">
    <path
          inkscape:connector-curvature="0"
          d="..."
          id="Mali"
          />
</a>

In the code above, we've nested the path into an anchor tag. The anchor tag has the attribute title which shows the country name on-hover. Also, it has href which allows us to visit the Wikipedia page on clicking that link. target="_blank" makes sure that the link opens in a new tab.

You may notice the xlink prefix on the attributes. This supports earlier browser versions. You can use the deprecated xlink:href attribute as a fallback in addition to the href attribute. See more info here.

5. How to style the SVG map

We can style our SVG map using CSS.

The common attributes in SVG path styles are fill, stroke, and stroke-width. For example, if you draw a rectangular path, then you can use fill to make it blue.

<svg>
  <style>
    rect {
      fill: blue;
    }
  </style>
  <rect x="10" y="10" width="500" height="100"></rect>
</svg>

Now, we can give select countries different colors. Also, we should have some sort of visual feedback when hovering over a country.

 <style>
      #mapsection {
        width: 50%;
        height: auto;
        fill: #ccc;
        stroke: #333;
        stroke-width: 2;
      }
      #mali {
        fill: brown;
      }

      #Benin {
        fill: #00baba;
      }

      #Nigeria {
        fill: yellow;
      }

      #Zimbabwe {
        fill: brown;
      }

      #Zambia {
        fill: green;
      }

      #Somalia {
        fill: darkseagreen;
      }

      #Mali {
        fill: gray;
      }

      path {
        fill: #1da1f2;
      }
      path:hover {
        fill: purple;
        stroke: red;
        stroke-width: 3px;
        transition: fill 0.4s;
      }
    </style>

The above block of CSS code styles elements on our map. Here is an explanation of each rule:

• #mapsection: This targets SVG elements with the ID mapsection. It sets the width to 50%, height to auto, and stroke properties for the element.
• #mali, #Benin, #Nigeria, #Zimbabwe, #Zambia, and #Somalia: These target specific path elements with IDs corresponding to their country names. They set the fill color for each country.
• path: This targets all path elements on the webpage. It sets the fill color to #1da1f2.
• path:hover: This targets all path elements on the webpage when they are hovered over with the mouse. It sets the fill color to purple, stroke color to red, and stroke width to 3px. It also sets a transition effect for the fill color change.

<!DOCTYPE html>

Try clicking on each country. The anchor tag will open a new page and show more information.

Click here to see the live demo.

Find the complete code here.

Conclusion

This tutorial explained how to create a clickable SVG map by setting up the HTML file, adding interactivity with CSS (including hover and click effects), and adding functionality by linking areas of the map to external web pages. We also discussed the benefits of using SVG maps.

References

There are plenty of resources available to learn more about SVGs. Here are some resources you can look up:

1. MDN Web Docs - SVG: MDN Web Docs is a great resource for learning about web development, including SVG. The SVG section covers everything from basic concepts to advanced topics.
2. SVG on CSS-Tricks: CSS-Tricks is a popular blog about web development and design. The SVG section covers a range of topics, including how to create SVG graphics, animation, and interactivity.
3. Xutini Tutorials: the fun way to learn web digital skills.
4. SVG Pocket Guide: SVG Pocket Guide is a book by Joni Trythall that covers the basics of SVG, including shapes, paths, text, and filters. It's a concise guide that's easy to read and follow.
5. SVG Animations: SVG Animations is a book by Sarah Drasner that covers the basics of SVG animations, including how to create and control animations using CSS and JavaScript.

We will build a project called Change The Background Color to illustrate these concepts. You can see the demo here.

In this tutorial, we will:

• learn how computers understand the concept of colors
• learn about the hexadecimal system and its usefulness to computers
• learn how to separate concerns in your code
• explore to the world of loops, arrays, and functions as used in JavaScript
• use this new knowledge to generate colors in hexadecimal
• introduce events in JavaScript
• click a button in our HTML code to call our functions
• change the body style background-color when the button is clicked

This article should be accessible to anyone who is familiar with variables and how to create them in any programming language.

What We'll Cover

1. How Computers Understand Colors
2. What is the Hexadecimal System?
3. How Hexadecimal Is Used In Color Spaces
4. How to Generate Colors With Hexadecimals

How Computers Understand Colors

Computer displays use tiny dots called pixels to display colors by mixing red, green, and blue light.

To interpret and manipulate colors, computers use mathematical models called color spaces. By converting colors into a specific color space, computers can modify and adjust them before displaying them on the screen.

There are many different types of color spaces, each with its own way of representing colors. Here are some examples:

1. RGB (Red, Green, Blue): This is the most common color space used in computer graphics, and it represents colors by mixing different amounts of red, green, and blue components.
2. CMYK (Cyan, Magenta, Yellow, Black): This is a color space used in printing, where colors are created by overlaying dots of different colors on top of each other.
3. HSL (Hue, Saturation, Lightness): This color space represents colors based on their hue (which color they are), saturation (how intense the color is), and lightness (how bright or dark the color is).
4. LAB (Lightness, A, B): This color space is used in digital imaging and represents colors based on their lightness, as well as their position on two color axes: A (from green to red) and B (from blue to yellow).
5. XYZ: This color space represents colors based on the amount of light that they reflect or emit, and is often used in color matching applications.

What is the Hexadecimal System?

Hexadecimal (or simply "hex") is a base-16 numbering system that is commonly used in computing and digital electronics.

In this system, numbers are represented using 16 digits: the regular decimal digits 0 through 9, plus the letters A through F which represent values 10 through 15.

Hexadecimal is often used in computing because it provides a compact and easy-to-read way to represent binary numbers. Each hex digit corresponds to four binary digits, or bits, which means that two hexadecimal digits can represent a byte of data (8 bits).

### How Hexadecimal Is Used In Color Spaces

Hexadecimal is commonly used to represent colors in various color spaces, particularly in digital media. 

Each component in RGB can have a value between 0 and 255, and these values can be converted to hexadecimal notation using a [base-16 numbering system](https://www.colorhexa.com/11eb11).

In RGB hexadecimal notation, each component is represented by a two-digit hexadecimal number, which can range from 00 to FF.   

For example, 

| Color      | RGB | Hexadecimal  | 
| ----------- | ----------- |  ----------- |
| Black   | 0,0,0        | #000000        |
| Teal | 0,186,186 | #00BABA |
| Green | 17,235,17 | #11EB11 |
| Musterd-Yellow   | 250,194,134 | #FAC286 |
| White     | 255,255,255       | #FFFFFF       |




![Image](https://lh4.googleusercontent.com/X4ES_ppBld_5qGeavLFSlvSwyXHREWoFaO9WBIp3mV4psy-FNbZV6hXD5_eES4gdzpAXIS8uv1qdFeAyKCwPMgXaZnmlTpBBpw4X2Z8_pyP426g_RSLtipKJsid-e4lNy8D9cmgqE3EtDo3wnVnhC68)
_Hexadecimal color system illulstration_

## How to Generate Colors With Hexadecimals

Our goal in this section is to build the demo project. The demo project is a button. On clicking this button, a color is generated that changes the background of the HTML webpage.

There are the 6 steps to building the project. We'll walk through them one by one.

### 1. Represent hexadecimals using an array

```js

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

The first step is to hold our characters in a structure. I have picked an array for simplicity. The way arrays work in JavaScript allows us to select any item by providing its index.

2. Create a function to extract items from this array

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

function getCharacter(index) {
    return hexCharacters[index]
}

The function getCharacter will take the index and return the hexademical-character stored in that place. This helps us as we pick our colors.

3. Represent colors using the extracted value

A hexadecimal representation of RGB starts with # followed by 6 characters selected from our array. Thus, the function getCharacters will be called 6 times. We can employ a for-loop to call our function faster.

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]


function getCharacter(index) {
    return hexCharacters[index]
}

function generateJustOneColor(){

    let hexColorRep = "#"

    for (let position = 0; position < 6; position++){
        hexColorRep += getCharacter( position )
    }

    return hexColorRep

}

console.log( generateJustOneColor() )

generateJustOneColor() generates a random hexadecimal color code represented as a string.

The function starts by declaring a variable named hexColorRep and initializing it with the # character.

Next, the function uses a for loop to generate the next six characters of the color code. The loop runs six times because each color code is represented by six hexadecimal digits.

Within the loop, the function calls another function named getCharacter() to generate a hexadecimal digit for each position of the color code. The position parameter is passed to the getCharacter() function to indicate which digit is being generated.

Once all six digits of the color code have been generated, the function returns the full color code as a string.

The same result is returned every time.

The above code will to return this same result/color given the same position for our for-loop. So we need to introduce randomness. This means our selection of the characters must have the element of surprise.

4. Improve our code to generate random colors

In JavaScript, Math.random() is one of the ways to introduce randomness. Math.random() gives a new result every time it is called in range 0 to 1.

While the Math.random() function generates a random decimal number between 0 (inclusive) and 1 (exclusive), we can manipulate this value to obtain a random integer between 0 and 15.

This is done by multiplying the random decimal number by the desired range of integers (in this case, 16) and then applying the Math.floor() method to round down the result to the nearest integer. This will ensure that the output is within the desired range of integers.

For example, if Math.random() generates the value 0.435, multiplying it by 16 would result in 6.96. Applying Math.floor() to this result would then round it down to 6, which is a random integer within the range of 0 to 15.

Math.floor() performs 2 roles here: it helps us avoid a RangeError by rounding-down the extremes (the maximum number will be 15) and ensures we always return an integer.

const randomNumber = Math.floor ( Math.random() * hexCharacters.length )

Math.random() gives a new result every-time it is called.

We have all the ingredients needed to generate our colour, so now we can combine them together. Each hex-colour must start with a "#" and be followed by 6 characters.

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]



function getCharacter(index) {
    return hexCharacters[index]
}

function generateNewColor() {
    let hexColorRep = "#"

    for (let index = 0; index < 6; index++){
        const randomPosition = Math.floor ( Math.random() * hexCharacters.length ) 
        hexColorRep += getCharacter( randomPosition )
    }

    return hexColorRep
}

console.log( generateNewColor() )

The generateNewColor() function is the main function of the program that generates the random hexadecimal color code. It starts by initializing a string variable named "hexColorRep" with the "#" character, as all hexadecimal color codes begin with this character.

Next, the function uses a for loop to generate six random characters for the color code. Within the loop, the function generates a random position within the range of the "hexCharacters" array using the Math.random() function and the length of the hexCharacters array. This random position is then used to obtain a random character from the hexCharacters array using the getCharacter() function. The resulting character is appended to the hexColorRep string variable.

Finally, the generateNewColor() function returns the complete hexadecimal color code represented as a string.

The result is always a new hex-color-rep.

5. Create an interface to present our code

We need an interface so users can interact with our code and see the magic we have created.

We are going to have an HTML page with a list of instructions and a button. The elements button and span are given the id attribute so it's easier to find them in our JavaScript code. You can see the HTML code here.

6. Connect the button to the function using an event

Our goal is to change the background-color style of this HTML page.

let btn = document.getElementById('b')
let bgColor = document.getElementById('s')

btn.addEventListener("click", (event) => {

    const newColor = generateNewColor()

    document.body.style.backgroundColor  = newColor
    bgColor.textContent = newColor 

})

This program that sets the background color of a webpage to a randomly generated hexadecimal color code when a button is clicked.

The program begins by defining two variables using the document.getElementById() method. The btn variable represents the button element on the webpage with the ID b, while the bgColor variable represents a text element on the webpage with the ID s.

Next, the program attaches an event listener to the btn element using the addEventListener() method. This listener listens for the click event on the button. When triggered, it executes a function that generates a new random color code using the generateNewColor() function.

The resulting color code is then assigned to the background color of the webpage using the style.backgroundColor property of the document.body element. This causes the entire webpage to be updated with the new color.

Finally, the color code is also displayed in the bgColor element on the webpage using the textContent property.

You can see the full code here.

FInal product

Summary

In this article, we have shown how to generate random colours in JavaScript. We used the methods random and floor from the Math class and showed basic usage of a for-loop.

In the demo project, the generated colour was passed as background to an HTML page. This is why on clicking the button, a new colour gets generated, and updates the background-color style of the page. Check out the full code here.

If you want to see more of teachings, check out Xutini - the fun way to learn digital skills.