add class to one element of an array in react

Question

I would like to pass a style or a class to an element of an array when this element is on hover. My issue is: whenever I hover one element of this array, the class or the style is added to each element of one array whereas I want only to apply the style or class to the element on hover. Here I want the tag P to appear whenever his parent DIV is on hover.

Note: I did try to play with the id but I cannot find a way to add a class within the function. It seems in react that it is more common to handle this change within the render method. So, how can I do it without the spread of this style or class to each element of the array? Thank you very much.

 this.state = {
    meals: [
    {
    src: meal1,
    id: "meal1",
    alt: "Burger",
    name: "Name1",
    description: [
    "Thick slices of French",
    "bread stuffed with cream cheese",
    " fried in egg",
    "Accompanied by Maine maple syrup",
    "sausage links"
    ]
    },
        {
          src: meal2,
          id: "meal2",
          alt: "Sandtwitch",
          name: "Name2",
          description: [
            "Cheddar and Monterey Jack cheesesslices of French",
            "on grilled toast",
            " fried in egg",
            "Accompanied by Maine maple syrup",
            "sausage links",
            "warm tomato soup or Gazpacho"
          ]
        },
        {
          src: meal3,
          id: "meal3",
          alt: "Sandtwitch",
          name: "Name3",
          description: [
            "Cheddar and Monterey Jack cheesesslices of French",
            "on grilled toast",
            " fried in egg",
            "Accompanied by Maine maple syrup",
            "sausage links",
            "warm tomato soup or Gazpacho"
          ]
        } 
      ],
      onHover: false
    };
  }

  paragraphAppear = () => {
    this.setState({
      onHover: !this.state.onHover
    });
  };

  render() {
    return (
      <section className="gallery_section">
        <h1> Some pics of our plats</h1>
        <div className={"meal_container"}>
          {this.state.meals.map((element, index) => (
            <figure key={element.id} onMouseOver={this.paragraphAppear}>
              <img src={element.src} onClick={this.effectPictures} />
              <div
                id={element.id}
                style={
                  this.state.onHover
                    ? { display: "block" }
                    : { display: "none" }
                }
              >
                <p>{element.name}</p>
              </div>
            </figure>
          ))}
        </div>
      </section>
    );
  }
}

Udith Gunaratna · Accepted Answer · 2019-11-14 10:39:29Z

4

First, you need to keep track of the ID of the hovered element as well. For that first change the paragraphAppear method to accept an element ID as below, and store that element ID also as a state variable.

paragraphAppear = (elementID) => {
    this.setState({
      onHover: !this.state.onHover,
      hoverID: elementID
    });
};

Then pass the element ID from the onMouseOver callback as below.

<figure key={element.id} onMouseOver={() => this.paragraphAppear(element.id)}>

Finally, check whether the hover is enabled as well as the element ID when applying the style.

<div
    id={element.id}
    style={
        (this.state.onHover && (this.state.hoverID === element.id))
            ? { display: "block" }
            : { display: "none" }
    }>

See a working code sandbox sample here (Check Test.js)

answered Nov 14, 2019 at 10:39

Udith Gunaratna

2,1211 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

etranger92 Over a year ago

I have just done it, sorry I am new. And I couldn't vote, as I didn't earn enough privilege otherwise I would have done it. :) see you.

Collectives™ on Stack Overflow

add class to one element of an array in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related