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

Use the controller to set the body's background image

Seeking help to update the image URL within the CSS code snippet provided. I would like to accomplish this from the controller and can work with either LESS or SCSS. Is there a solution for this? .background{ height: 100%; width: 100%; backg ...

cssruby-on-rails-3.1view

I'm experiencing an issue with loading the GeoJSON file on my localhost

I included this vector into my local host code, but the JSON file does not seem to load. geojson_layer = new OpenLayers.Layer.Vector("features", { projection: epsg4326, strategies: [new OpenLayers.Strategy.Fixed()], pro ...

javascriptopenlayersgeojson

What's the best way to determine the event type when a mouseDown occurs in React while working on a canvas?

I've been tackling the challenge of incorporating the <canvas /> element into a react project, but I'm encountering difficulties with determining the appropriate event type for it. In my quest for answers, I stumbled upon this insightful ar ...

reactjstypescriptcanvasevent-handlingonmousedown

Reactjs - Creating a video component with a placeholder that loads the video seamlessly

I created a Video component that utilizes the React.Suspense component to show a placeholder while the video is loading. However, I'm facing an issue where it seems like the functionality isn't working as intended. When I set the network to "slow ...

javascriptreactjsnext.jspreload

Upload files using Ajax

Looking to implement Ajax and PHP for file upload functionality. The form includes an <input type="file"> tag, and I aim to enable users to upload a file without having to refresh the page. Any guidance on how to achieve this? While a refresh is no ...

javascriptphpajaxfile-uploadupload

Switching visual representation that appears upon clicking the dropdown menu

Issue with Duplicating Dropdown and Image Change const image = document.querySelector('.item__img'); const checkbox = document.querySelectorAll('.imgOption'); function handleChange() { let imgsrc = this.getAttribute("data-value ...

javascriptjquery

Creating a script in JavaScript to execute a command or query after midnight

I have a query regarding MongoDB and JavaScript (Express.js). Here is the scenario: I am working on developing a backend service for movies and TV series. I have already set up basic routes and functions. One of my requirements is to select a movie from ...

javascriptmongodbexpress

Deliver search findings that are determined by matching criteria, rather than by identification numbers

I am seeking to return a JSON match upon form submission, rather than simply searching for a specific ID. However, I am uncertain about how to structure this. I have the ability to search for the necessary match in a JavaScript document within one of my n ...

javascriptjson

Is there a way to verify the custom form when the braintree PayPal checkout button is clicked?

I am seeking a solution to validate a custom PHP form when the Braintree PayPal checkout button is clicked. Currently, the form redirects to the PayPal screen if it is not properly filled out. My goal is to prevent the PayPal popup window from opening if ...

javascriptphppaypalbraintreebraintree-vault

Unable to upload file on ReactJS platform

I'm facing an issue while trying to upload a file and text using a form. The file doesn't get uploaded, although it works fine with Postman. Can anyone identify the problem? Thank you Axios function : postArticles : (content, attachment, header ...

javascriptnode.jsreactjsexpress

Communication between the front-end (react) and backend (nodejs) is unable to retrieve only the specific value via API call

As a newcomer to backend/frontend development, I'm facing an issue that I can't seem to resolve... I have a store.js file that stores user interaction data (using zustand). One of the variables, 'feed', returns a value like "0xD4a3386 ...

javascriptnode.jsreactjsethereum

Child component in VueJs is undergoing a situation where the variable is found to be

Whenever an event is triggered, a function is called to populate a variable and open a modal from a child component. However, in the modal, the new variable appears empty initially. If I close and then reopen the modal, the data finally loads. I have atte ...

javascriptvue.jsvuejs2

Setting up a personalized configuration entry in environment.js

I am currently working with EmberJS version 2.4.2 and I have a specific requirement to handle custom configuration entries using an environment.js file. var ENV = { APP: { myKey: "defaultValue" } }; While everything works perfectly in development ...

javascriptember.js

How to remove a variable definition in Typescript

Is there a way to reset a variable to undefined after assigning it a value? To check, I am using the Underscore function _.isUndefined(). I have attempted both myVariable = undefined and delete myVariable without success. ...

javascriptangularjstypescript

What is the reason for receiving the error message "Expected corresponding closing tag for JSX fragment"?

Feeling lost as to why this keeps happening, I'm completely stumped and need some assistance to unravel the root cause of this issue. It's been puzzling me for about ten minutes now. return ( return ( <div> <Head> ...

reactjsnext.js

When working in React, I encountered a problem with the for of loop, as it returned an error stating "x is undefined." Although I could easily switch to using a simple for loop, I find the for of loop to

I'm encountering an issue when using a for of loop in React, as it gives me an error stating that "x is undefined". import { useEffect } from "react"; export default function HomeContent() { useEffect(() => { let content = document ...

javascriptreactjs

Preventing Vue.js from triggering watch on initial load

I need to implement a feature where a button is initially disabled and only becomes enabled when the input value is changed. To achieve this, I am using a boolean flag that is set to true by default and turns false only when the input changes. The v-model ...

javascriptvue.jsvuejs2vue-componentvuejs3

I'm currently attempting to set up Firebase within my React application, but I keep encountering this error message

When I try to run npm install firebase or npm i firebase on Windows, I encounter the following error: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

reactjsfirebase

What is the best way to retrieve state within a property of a React class component?

I have encountered an issue with a React Class Component where I am trying to separate a part of the rendered JSX but unable to access the Component's state within the separated JSX as a property of the class. The scenario is quite similar to the fol ...

javascriptreactjs

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

javascripthtmljquerycssreactjs