Assign different id to the same element inside map-CodePudding

I am rending this component Card inside map function. What I'm trying to achieve is to assign a different id to Card, each time the loop renders it. So basically all the Cards rendered will have a different id.

I want to change the color of icon (FontAwesomeIcon) on the Card component to red when a user clicks on. This is the Card Component -

   <div className='Card'>

      <div className='cardimg'>
        <img src={props.product.image} alt='55' />
      </div>

      <p>{props.product.title}</p>

      <div className='flex'>
        <p>${props.product.price}</p>
        <FontAwesomeIcon className='icon1' id={Math.random} onClick={(e) => {
          console.log(e.target.id);
          document.getElementById(e.target.id).style.color = 'red'
        }} icon={faHeart} />
      </div>
  </div>

The icon :

<FontAwesomeIcon className='icon1' id={Math.random} onClick={(e) => {
          console.log(e.target.id);
          document.getElementById(e.target.id).style.color = 'red'
        }} icon={faHeart} />

Here is Component that renders Card

 <div className='Results'>
        {console.log(props.f1)}
        {props.allproducts ? props.allproducts.map(e => {

            if (e.title.toUpperCase().includes(props.value.toUpperCase()))

                if ((props.f1.length !=0 ?  ((e.category==props.f1[0]) || (e.category==props.f1[1]) || (e.category==props.f1[2]) || (e.category==props.f1[3])) : true) && (props.f2[0] ? (e.price > props.f2[0] && e.price < props.f2[1]) : true) )
                    {return <Card product={e} key={e.id}/>}


        }) : ''}
    </div>

What I've tried: Assigning a random value using Math.random function. Sending a unique value through props and assigning it to id.

would also appreciate if there's a different way to achieve this.

CodePudding user response：

You can use the key prop to transfer id to card

<div className='Card'>

      <div className='cardimg'>
        <img src={props.product.image} alt='55' />
      </div>

      <p>{props.product.title}</p>

      <div className='flex'>
        <p>${props.product.price}</p>
        <FontAwesomeIcon className='icon1' id={"icon_" props.key} onClick={(e) => {
          console.log(e.target.id);
          document.getElementById("icon_" props.key).style.color = 'red'
        }} icon={faHeart} />
      </div>
  </div>

CodePudding user response：

Do it with an useState-Hook object:

  const [cardClicked, setCardClicked] = useState({})

    // rest of youre code

    return (<>
    // some nice jsx

    {xyz.map((element, index) => {
    const id = `${element.name}_${index}`;
    return (
        <Card id={id} onClick={() => setCardClicked({...cardClicked, [id]: cardClicked[id] ? false : true)}>
            .....
            <Icon style={{color: cardClicked[id] ? "red" : "blue"}} />
            .....
        </Card>)
    })}</>)

CodePudding user response：

As per my understanding, you want to change the color of FontAwesomeIcon when the user clicks on the icon. You should have the unique ids in the array that are on the map, then you need to create a state, where you store the id when the user clicks on the icon, and then you make a ternary condition in className, as you can see the code below, I hope this is the best way.

const [id, setId] = useState(null);

<FontAwesomeIcon className={`icon1 ${id === props.product.id ? 'red' : ''}`} id={Math.random} onClick={(e) => {
    setId(props.product.id);
}} icon={faHeart} />