How to get onClick in React to work on a single element with multiple siblings?

Question

I am new to React and have a problem with trying to fire an onClick event. I have the event working, when it gets clicked, the div appears and reappears. The problem that is that if I press a button for a particular item, all of the divs appear instead of the div that I just clicked the button on. How do I make it so that that the button I clicked on will only fire on that particular element.

Here is my code:

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      userInput: '',
      getRecipe: [],
      ingredients: "none"
    }
  }

  handleChange = (e) => {
    this.setState({
      userInput: e.target.value
    })
  }
  

  handleSubmit = (e) => {
    e.preventDefault()

    const getData = () => {
      fetch(`https://api.edamam.com/search?q=${this.state.userInput}&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=18`)
        .then(res => {
          return res.json()
        }).then(data => {
          this.setState({
            getRecipe: data.hits
          })
        })
    }
    getData()
  }
// this is where the button logic comes in
  getIngredients = (e) => {
    e.preventDefault()
    if (this.state.ingredients === 'none') {
      this.setState({
        ingredients: "block"
      })
    } else {
      this.setState({
        ingredients: "none"
      })
    }
  }


  render() {

    return (
      <div className="recipes">
        <Nav changed={this.handleChange} submit={this.handleSubmit} />
        <Content
          userInput={this.state.userInput}
          recipe={this.state.getRecipe}
          getIngredients={this.getIngredients}
          ingredients={this.state.ingredients} />
      </div>
    )
  }
}

const Content = ({ userInput, recipe, getIngredients, ingredients }) => {

    return (
        <div>
            <h2 className="userinputtitle"> {userInput} </h2>
            <div className="containrecipes">
                {recipe.map(rec => {
                    return (
                        <div key={rec.recipe.label} className="getrecipes">
                            <h1 className="recipetitle" key={rec.recipe.label}>{rec.recipe.label.toUpperCase()}</h1>
                            <img src={rec.recipe.image}></img>
                            <h4 className="health"> Health Labels: {rec.recipe.healthLabels.join(', ')}</h4>
                            <h4 > Diet Label: {rec.recipe.dietLabels}</h4>
                            <h4 > Calories: {Math.floor(rec.recipe.calories)}</h4>
                            <h4 className="cautions"> Cautions: {rec.recipe.cautions}</h4>
                            <div>
                                <h4>{rec.recipe.digest[0].label + ":" + " " + Math.floor(rec.recipe.digest[0].total) + "g"}</h4>
                                <h4>{rec.recipe.digest[1].label + ":" + " " + Math.floor(rec.recipe.digest[1].total) + "g"}</h4>
                                <h4>{rec.recipe.digest[2].label + ":" + " " + Math.floor(rec.recipe.digest[2].total) + "g"}</h4>
                            </div>
// the button is clicked here, yet all div fire at the same time
                            <button onClick={getIngredients} className="getingredients">Ingredients</button>
                            {rec.recipe.ingredients.map(i => {
                                return (
                                    <div style={{ display: ingredients }} className="containingredients">
                                        < ul className="ingredients">
                                            <li className="ingredient">{i.text}</li>
                                        </ul>
                                    </div>
                                )

                            })}
                        </div>

                    )
                })}
            </div>
        </div>

    )
}

Answer 1

Update getIngredients to consume also a recipe ID and save that in state instead.

Toggle single recipe ingredient

this.state = {
  userInput: '',
  getRecipe: [],
  ingredientsId: null
}

...

getIngredients = recipeId => e => {
  e.preventDefault();
  this.setState(prevState => ({
    ingredientsId: prevState.ingredientsId ? null : recipeId,
  }));
}

...

<Content
  userInput={this.state.userInput}
  recipe={this.state.getRecipe}
  getIngredients={this.getIngredients}
  ingredientsId={this.state.ingredientsId} // <-- pass id
/>

Conditionally set the display style in Content.

const Content = ({ userInput, recipe, getIngredients, ingredientsId }) => {

  ...

  <button
   onClick={getIngredients(recipe.id)} // <-- pass id
   className="getingredients"
  >
    Ingredients
  </button>
  <div
   style={{
     // set display style
     display: ingredientsId === recipe.id ? "block" : "none"
   }}
   className="containingredients"
  >
    <ul className="ingredients">
      <li className="ingredient">{i.text}</li>
    </ul>
  </div>

  ...

Toggle multiple recipe ingredient

Same as above with minor changes

State is map

this.state = {
  userInput: '',
  getRecipe: [],
  ingredientsId: {},
}

Toggle id in handler

getIngredients = recipeId => e => {
  e.preventDefault();
  this.setState(prevState => ({
    ingredientsId: {
      ...prevState.ingredientsId,
      [recipeId]: !prevState.ingredientsId[recipeId]
    },
  }));
}

Look up recipeId in passed map

style={{
  // set display style
  display: ingredientsId[recipe.id] ? "block" : "none"
}}