I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am unsure how to render the icons properly because they have complex syntax and are HTML-based. Is there a way to store these icons inside an object and access them as properties? The icons are supposed to fit into the svg tag within this structure.

  <div className="flex flex-col bg-stone-100">
          <div className="flex flex-row flex-shrink-0 flex-grow-0 relative mt-2 mr-7 mb-7 ml-4">
            <span className="h-1 w-1 mr-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                height={18}
                width={18}
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008... (truncated)
                />
              </svg>
            </span>
javascriptcssreactjs

Answer №1

One way to enhance your code structure is by creating a dedicated component for this particular task. This approach can help maintain the cleanliness of your codebase. Consider implementing something along these lines:

const CustomIcon = ({ width, height, iconSource, iconColor }) => (
  <span className="h-1 w-1 mr-4">
    <svg
      xmlns={iconSource}
      fill={iconColor}
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      height={width}
      width={height}
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
      />
    </svg>
  </span>
);

export default CustomIcon;

You have the flexibility to customize the props based on your requirements. Subsequently, you can integrate the CustomIcon component wherever necessary like so:

<CustomIcon
  width={18}
  height={18}
  iconColor="none"
  iconSource="http://www.w3.org/2000/svg"
/>

Answer №2

If you're looking to learn more about adding vector graphics to the web, check out this helpful resource on MDN. REMEMBER: It may not be a quick fix, but it's certainly worth exploring!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Child component does not trigger the dispatch action

Today has been a day of searching, and I'm finally reaching out for help. I have a Redux connected component named "Homepage" which serves as the main page in React Router. Inside "Homepage", there's a child component called "EventCreate" that ...

reactjsreduxaxiosdispatchthunk

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

javascriptjquerycsshtml-table

Navigate directly to a specific section on the current webpage using the URL feature in Next.js

I've encountered an issue with Next.js 12.2.5 where I created a section with a specific ID for user redirection, but whenever I try to access the URL with the anchor and section ID (e.g., http://localhost:3000/mx#contact-form), I receive the error mes ...

reactjsnext.js

Ways to conceal an animated gif once it has been downloaded?

Is it possible to have an animated gif image vanish once server-side Java code runs and the client receives an HTTP Response from the webserver without relying on Ajax? I am currently utilizing the following Struts2 submit button: <s:submit value="sho ...

javascriptjavajqueryajaxstruts2

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref I've implemented FileReader() to read the field. Vue Component <div v-for="(image, index) in imgFile" :key="index"> <img :ref="'image'+parseInt( index )"> {{image.name}} ...

javascriptvue.js

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

I've encountered a similar question before, but unfortunately, the solution provided didn't help me! I'm relatively new to JavaScript and have been struggling with this issue for nearly a day now without success. The structure of my class a ...

javascriptcanvas

Can an express server be utilized to update a page simultaneously for all of its users?

As I develop a web application, one of the features involves adding songs to a queue. The app consists of multiple rooms, each with its own properties, including a song queue stored as an array on the server. Using app.post, a new song URL is sent to the s ...

node.jsreactjsexpressserver

Even though I am aware that the variable AJAX is attempting to return is not empty, it is still returning 'undefined'

I wrote a basic PHP script that retrieves information from a database and stores it in a multidimensional array: <?php //PHP code to fetch data from DB error_reporting(E_ALL); $db = new mysqli("localhost","root","pass", "Media") ...

javascriptphpajaxundefined

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

javascriptphphtmlcss

The minimum and maximum validation functions are triggered when I am not utilizing array controls, but they do not seem to work when I use array controls

Take a look at the stack blitz example where min and max validation is triggered: https://stackblitz.com/edit/angular-mat-form-field-icrmfw However, in the following stack blitz with an array of the same controls, the validation does not seem to be worki ...

javascripthtmlangulartypescriptangular8

"Patience is key when it comes to waiting for an HTTP response

Looking for a solution in AngularJS, I have a service that calls the backend to get some data. Here is how the service looks: app.factory('myService', ['$http', '$window', '$rootScope', function ($http, $window, $ro ...

javascriptangularjshttp

Extracting a variable established on the client side and passing it to a server-side node backend

I am currently working on creating a comments section for a web application. The front end of the app displays information about the threading level of each comment. When users submit comments, I need to pass this threading information to the back end in o ...

javascriptnode.jsexpress

React displaying an error indicating that the setTimeout function is undefined?

While attempting to integrate the XTK library with React, I encountered an issue where it kept throwing an error stating that the setTimeout function is not a valid function. Surprisingly, my code appears to be flawless and works perfectly fine when used d ...

javascriptreactjsnpm3dxtk

Spring Boot fails to recognize path variable data sent from Angular

When working with Angular 7, I encountered a situation where I needed to pass a value from the service class of Angular. Here is how I achieved it: executeHelloWorldBeanServiceWithPathVariable(name){ console.log("name coming from here"+name); retu ...

javascriptjavaangularspringtypescript

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

jqueryhtmlcssjquery-animatecss-transitions

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

javascriptjqueryhtmlarrays

The perfect approach for loading Cordova and Angularjs hybrid app flawlessly using external scripts

We have developed a single page hybrid app using cordova 3.4.0 and angularJS with the help of Hybrid app plugin(CPT2.0) in visual studio 2013. This app contains embedded resources such as jquery, angularjs, bootstrap, and some proprietary code. Additiona ...

javascriptangularjscordovavisual-studio-cordova

How can you add a new div directly after the parent div's content and display it in-line?

I have a banner that stretches to fill the width completely. Inside this main div, there is another smaller div measuring 30px in size positioned at the end. The nested div contains a close icon background image, and upon clicking it, the entire banner get ...

htmlcss

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

I am working with an axios apiClient and trying to retrieve the email stored in localStorage to use in the header of my component. I attempted to access the email by using response.headers['email'] and storing it in a variable called email, but ...

javascriptvue.jsvuejs2axiosvue-component

Guide on how to selectively add middleware such as multer to a fresh express router

For a previous project, I set up a router and utilized multer for handling file uploads. I was able to apply the multer middleware selectively on specific routes as shown below: var router = express.Router(); var multer = require('multer'); var ...

javascriptnode.jsexpressmulter