Question 168577 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I pass props into a component in an array using Javascript?

I’m trying to render a component from an array that is mapped. The actual rendering of the component is fine, the problem is that i want to pass props into it but i’m not sure how. I’m using Tailwind CSS so the props that i’m passing in are the classes for components.

This is how i would normally render it if its not being mapped:

import AppleIcon from "../assets/fruitIcons/AppleIcon";
import BananaIcon from "../assets/fruitIcons/BananaIcon";
import KiwiIcon from "../assets/fruitIcons/KiwiIcon";

export default function Test() {
  const className = "w-10 h-10 fill-current text-orange-700";

  return (
    <>
      <AppleIcon className={className} />
<KiwiIcon className={className} />
<BananaIcon className={className} />
</>

And this is how i’m trying to call it. First the array:

//necessary icon imports

export const fruitsArray = [
  {
    id: "fruit",
    title: "Apple",
    value: "apple",
    type: "checkbox",
    icon: <AppleIcon />,
  },
  {
    id: "fruit",
    title: "Banana",
    value: "banana",
    type: "checkbox",
    icon: <BananaIcon />,
  },
  {
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    icon: <KiwiIcon />,
  }
]

And then how its called/rendered:

import {fruitsArray} from "../arrays/fruitsArray

export default function Fruits() {

const className = "w-10 h-10 fill-current text-orange-700";

return (
    <>
      <ul>
        {fruitsArray.map((icon) => (
          <li key={icon}>{icon.icon}</li>
        ))}
      </ul>
    </>
  );
}

This last block of code renders without css, i just don’t know how to pass props from the page/component that’s running the map.

Please let me know if i’m going about this the right way.

Tags:

2

Answers


  1. 0

    You could transform fruitsArray into a function

    export const fruitsArrayGenerator = (className) => [
  {
    id: "fruit",
    title: "Apple",
    value: "apple",
    type: "checkbox",
    icon: <AppleIcon className={className} />,
  },
  {
    id: "fruit",
    title: "Banana",
    value: "banana",
    type: "checkbox",
    icon: <BananaIcon />,
  },
  {
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    icon: <KiwiIcon />,
  }
]

    then

    import {fruitsArray} from "../arrays/fruitsArray

export default function Fruits() {

const className = "w-10 h-10 fill-current text-orange-700";

return (
    <>
      <ul>
        {fruitsArrayGenerator(className).map((icon) => (
          <li key={icon}>{icon.icon}</li>
        ))}
      </ul>
    </>
  );
}
    Login or Signup to reply.
  2. 0

    I suggest changing each object’s icon prop to a render function:

    {
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    render: (className) => <KiwiIcon className={className} />,
}

    Then

    <ul>
    {fruitsArray.map((icon) => (
      <li key={icon.title}>{icon.render(className)}</li>
    ))}
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search