DEV Community: Olukayode Asemudara

How to Fix Icons Not Displaying in React: A Simple Solution

Olukayode Asemudara — Fri, 09 May 2025 21:21:07 +0000

If you're working on a React project and you've tried using icons but they aren't showing up, you're not alone. It’s a common issue that many React developers face. In this post, I’ll walk you through why your icons might not be displaying and how to fix it, using a super simple approach.

The Problem

Let’s say you’re using an icon library like React Icons in your React project. You add the icon to your component, but instead of seeing the icon, nothing shows up. You check your code, and everything seems fine, but the icon is still missing.

What’s happening here? 🤔

The issue is that you're passing the icon component incorrectly. In React, we need to pass components as JSX elements to render them properly.

The Cause

If you’ve done something like this:

icon: FaCode

You’re just passing a reference to the FaCode component, but you're not actually rendering it.

React doesn't know that you want to display this icon as a part of your UI. It only sees the reference to the component, and that's why nothing shows up.

The Solution

To fix this, you need to render the component inside your JSX.

Let’s say you have a services array where you store the icons and other information like this:

export const services = [
  {
    id: 1,
    title: "Frontend Development",
    icon: FaCode,  // The icon reference
    description: "I create responsive websites...",
  },
  // More services...
];

Now, when you map through your services and want to display the icons, you need to render the icon as a component. Here’s how you do it:

{services.map((service) => (
  <div key={service.id}>
    <span>
      <service.icon />  {/* This is how you render the icon */}
    </span>
    <h3>{service.title}</h3>
    <p>{service.description}</p>
  </div>
))}

Notice how we used <service.icon />? This tells React to render the icon like a normal component.

Why This Works

In React, to display a component (like FaCode), you need to treat it like a JSX element, meaning you write it as <Component />. By doing this, React knows you want it to show up in your UI.

So, instead of just passing FaCode, you're now telling React to actually render the icon by using the correct JSX syntax.

Conclusion

If your icons aren’t showing up in React, just remember to use the JSX component syntax when you’re rendering them. Instead of passing the icon component reference, call it like this:

<service.icon />

Now your icons should display perfectly! 🎉

I hope this helps you solve the issue. If you have any more questions or run into other problems, feel free to leave a comment or reach out. Happy coding! 💻

Mastering React Forms with a State Object: My Personal Experience

Olukayode Asemudara — Tue, 08 Apr 2025 06:29:27 +0000

As a frontend developer constantly learning and building, one of my recent tasks was to create a form in React where multiple input fields were all tied to a single state object. Simple in theory, but I discovered a few powerful patterns that made the process clean, scalable, and easy to manage — and I’d love to share my experience here.

The Challenge

I needed to build a “Create New Post” form with fields like title, date, time, content, and even an image. Rather than manage each input with its own state, I decided to keep things tidy by using one useState hook with an object like this:

const [newPost, setNewPost] = useState({
  title: "",
  date: "",
  time: "",
  content: "",
  image: null
});

But then came the question: How do I update individual fields in this object when users type into the form?

The Pattern That Changed Everything

Instead of writing separate functions for each input, I used an inline onChange handler that looks like this:

onChange={(e) =>
  setNewPost({ ...newPost, [e.target.name]: e.target.value })
}

At first glance, it felt a little complex — but once I understood it, it became second nature.

Here’s the breakdown:

e.target.name is the name of the input (like "title").
e.target.value is the value typed in.
[e.target.name]: e.target.value dynamically updates the correct field in the newPost object.
The spread operator ...newPost ensures all other values in the object stay unchanged.

This pattern made the form feel way more dynamic and scalable. I could add more fields without needing to touch the onChange logic again. And that’s exactly the kind of flexibility I love as a developer.

Bonus: File Uploads

The only difference was with the image input. File inputs use e.target.files[0] instead of e.target.value, so I updated that one like this:

onChange={(e) =>
  setNewPost({ ...newPost, image: e.target.files[0] })
}

My Key Takeaway

Learning this pattern helped me write cleaner React forms and gave me a better grasp of how state management really works under the hood. It’s one of those small wins that makes a big difference in bigger projects.

If you're just getting started with React forms, I highly recommend this method. It keeps things neat, avoids repetition, and scales beautifully as your form grows.

A Technical Article about front-end technologies.

Olukayode Asemudara — Fri, 28 Jun 2024 20:14:45 +0000

Introduction

In the ever-evolving landscape of web development, frontend technologies have seen a dramatic transformation over the past few decades. From the static web pages of the early internet to the dynamic, interactive, and highly responsive applications we use today, frontend technologies have played a crucial role in shaping user experiences. This article takes you through the journey of frontend technologies, highlighting key milestones and the modern tools that are driving innovation in the field.

The Early Days: HTML, CSS, and JavaScript

The Foundation HyperText Markup Language (HTML) is the backbone of the web, providing the structure for web pages. Despite its simplicity, HTML laid the groundwork for the web as we know it today.

CSS: Styling the Web. CSS allowed developers to separate content from design, making it easier to maintain and update the look and feel of websites. With CSS, developers could control layout, colors, fonts, and more, bringing a more polished and visually appealing experience to users.

JavaScript: Bringing Interactivity

JavaScript, revolutionized the web by enabling interactive features. Unlike HTML and CSS, JavaScript is a programming language that runs in the browser, allowing developers to create dynamic content that responds to user actions. From form validation to interactive maps, JavaScript opened up a world of possibilities for web developers.

The Rise of Libraries and Frameworks

React: The Component Revolution
Facebook's React, introduced in 2013, brought a revolutionary approach with its component-based architecture. React components encapsulate their logic and presentation, making it easier to manage and reuse code.

Vue.js: The Progressive Framework
Vue.js, created by Evan You in 2014, combined the best of AngularJS and React. Vue is known for its simplicity and flexibility, making it approachable for beginners who probably just decided to move from writing pure javascript to delve into a new javascript framework. Unlike React, Vue is quite very easy for beginners because it uses almost same code-block like pure javascript and still very powerful enough for large-scale applications. Vue's reactive data binding and component-based architecture have made it a favorite among developers plus me in particular. Especially when you are moving from vue to Nuxt which is still Vue but unlike Vue, where you have to import a number of components, Nuxt auto imports these components anytime that you need to use them in a certain code-block.

Conclusion

As much as I am aware that HNG is a React only based Internship which means that I would either have to learn to use react or possibly be evicted out of the race along the line. I would still love to go ahead if given the opportunity to learn alongside others using Vue/Nuxt, if otherwise, I would continue to learn React till I finish or till I am dropped out of the race.

HNG Internships
HNG Internships

Programmatically displaying nav menu from an array and binding to its url property

Olukayode Asemudara — Mon, 04 Mar 2024 07:51:02 +0000

Summary:
In a recent Vue.js/Nuxt.js project, the initial challenge I encountered was with the navigation menu links not functioning correctly despite being correctly bound. After thorough debugging and troubleshooting, I successfully resolved the issue with the following steps:

Correct Binding of Route Paths:

## First error

<li v-for="link in links" :key="link">
            <NuxtLink :to="url">{{ link.text }}</NuxtLink>
          </li>

links: [
        { text: "About", url: "/about" },
        { text: "Portfolio", url: "/" },
        { text: "Blog", url: "/blog" },
      ],

## Corrected code;

<li v-for="link in links" :key="link.url">
            <NuxtLink :to="link.url">{{ link.text }}</NuxtLink>
          </li>

links: [
        { text: "About", url: "/about" },
        { text: "Portfolio", url: "/" },
        { text: "Blog", url: "/blog" },
      ],

Ensure that the to attribute in NuxtLink components is correctly bound to the route paths using :to="link.url".
Verify that the links array contains objects with text and url properties representing the route paths.
Iterating Over Links Array:

Use v-for directive to iterate over the links array and generate NuxtLink components dynamically.
Each link object should have text representing the link text and url representing the route path.
Testing and Debugging:

Test the navigation menu on different devices and screen sizes to ensure links are clickable and functional.
Utilize browser developer tools to inspect elements and debug any JavaScript errors or CSS issues affecting link functionality.
By addressing the initial challenge and ensuring correct binding of route paths, the issue with links not working in the Vue.js/Nuxt.js navigation menu was successfully resolved. This approach ensures a smooth and seamless user experience for navigating through the website.

Feel free to incorporate these steps into your Vue.js/Nuxt.js projects to troubleshoot and resolve similar issues with navigation menus. Happy coding!

Slots VS Props in NUXT-3

Olukayode Asemudara — Sun, 03 Mar 2024 15:58:23 +0000

In Nuxt 3, "slots" and "props" serve different purposes in the context of components.

Slots:
- Slots allow you to pass content from a parent component to a child component. They are useful when you want to create reusable components that can accept different content depending on where they are used.
- In Nuxt 3, slots are defined in the child component using <slot></slot> tags. The content provided by the parent component is then inserted into these slots.
- Slots provide flexibility and reusability by allowing the parent component to inject content into specific areas of the child component's template.

Example:

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot> <!-- Content from parent component will be inserted here -->
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <!-- Content passed to ChildComponent's slot -->
      <p>This content will be placed inside the ChildComponent.</p>
    </ChildComponent>
  </div>
</template>

Props:
- Props are custom attributes that you can define on a component to pass data from a parent component to a child component.
- They allow you to make your components dynamic by passing data dynamically to them.
- In Nuxt 3, props are defined in the child component's script section and can be used inside the component's template.
- Props are useful when you need to pass specific data or configurations to a component.

Example:

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent title="Dynamic Title" />
  </div>
</template>

In summary, while slots are used for passing content from parent to child components, props are used for passing data or configurations from parent to child components in Nuxt 3.

> Anytime, anyday..I'd prefer to use SLOTS instead of PROPS. Slots come in very handy and you have easier control of your DOM than when you use props.

Your first Nuxt-3 App

Olukayode Asemudara — Sun, 03 Mar 2024 14:16:19 +0000

Prerequisites for installing Nuxt-3 on your device;

Node.js - v18.0.0 or newer
Text editor - We recommend Visual Studio Code with the Volar Extension
Terminal - In order to run Nuxt commands

Now go to the nuxt website to get started with setting up your nuxt app. Click on the get started button and follow these prompts;

npx nuxi@latest init (Open a terminal (if you're using Visual Studio Code, you can open an integrated terminal) and use the following command to create a new starter project:).
code . (Open your project folder in Visual Studio Code:)
cd (Or change directory into your new project from your terminal:)
npm install (Install the dependencies:)
npm run dev (Now you'll be able to start your Nuxt app in development mode:)
Well done! A browser window should automatically open for http://localhost:3000.