ReactJS - Access key of container div on click?

Question

Here is the code that I'm working on right now.

How can I access the key that I have on the container div? Right now I'm just trying to console.log it but ultimately, I need to pass the key to an action so I can make a call to an API.

Thanks for any advice.

I want to access the key on the container div

 renderRecipes() {
  return _.map(this.props.recipes, recipe => {
   return (
    <div className="card" style={cardStyle}  key={recipe.idMeal}>
      <img className="card-img-top" src={recipe.strMealThumb} alt="Recipe" />
      <div className="card-body">
        <h5 className="card-title">{recipe.strMeal}</h5>
        <button className="btn btn-outline-primary" onClick={this.viewRecipe}>
          View Recipe Details
        </button>
      </div>
    </div>
   )
 })
}

 render() {
  console.log(this.props.recipes);
   return (
    <div>
     <h2>Main Ingredient Search Page</h2>
     <SearchField />
     <div className="d-flex flex-row flex-wrap">
      {this.renderRecipes()}
     </div>
  </div>
);
 }
}

To clarify, I want the OnClick function on the button to be the trigger to fetch the key from the container div. — Victorious415
– Victorious415, Commented Apr 20, 2018 at 20:19

Austin Greco · Accepted Answer · 2018-04-20 21:13:53Z

1

You can do it pretty easily with an anonymous function:

<button className="btn btn-outline-primary" onClick={() => this.viewRecipe(recipe.mealId)}>
  View Recipe Details
</button>

But the best way would be to extract the recipe into it's own component. Then it's nicely encapsulated and doesn't re-render onclick references.

class Recipe extends Component {
  onViewDetails = () => {
    this.props.onItemClick(this.props.id);
  }

  render() {
    const {
      name,
      thumbnail
    } = this.props;

    return (
      <div className="card" style={cardStyle}>
        <img className="card-img-top" src={thumbnail} alt="Recipe" />
        <div className="card-body">
          <h5 className="card-title">{name}</h5>
          <button className="btn btn-outline-primary" onClick={this.onViewDetails}>
            View Recipe Details
          </button>
        </div>
      </div>
    )
  }
}

--

return _.map(this.props.recipes, recipe => (
  <Recipe
    key={recipe.idMeal}
    id={recipe.idMeal}
    thumbnail={recipe.strMealThumb}
    name={recipe.strMeal}
    onItemClick={this.viewRecipe}
  />
);

edited Apr 20, 2018 at 21:13

answered Apr 20, 2018 at 20:31

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

2 Comments

Rodrigo Ferreira Over a year ago

That tip is useful but is your code right? I think the button code should have onClick={this.onViewDetails} right?

Victorious415 Over a year ago

This solution (i.e. the anonymous function) worked for me. Thank you very much!

Sergio · Accepted Answer · 2018-04-20 20:22:47Z

0

I think you could do something like this

renderRecipes() {
  return this.props.recipes.map(recipe => {
   return (
    <div className="card" style={cardStyle}  key={recipe.idMeal}>
      <img className="card-img-top" src={recipe.strMealThumb} alt="Recipe" />
      <div className="card-body">
        <h5 className="card-title">{recipe.strMeal}</h5>
        <button className="btn btn-outline-primary" onClick={() => this.viewRecipe(recipe.idMeal)}>
          View Recipe Details
        </button>
      </div>
    </div>
   )
 })
}

Now, in the onClick function you'll receive the key!

answered Apr 20, 2018 at 20:22

Sergio

1061 silver badge7 bronze badges

Comments

Rodrigo Ferreira · Accepted Answer · 2018-04-20 20:31:01Z

0

I think you can define your viewRecipe method in this way:

viewRecipe = recipe => e => console.log(recipe)

viewRecipe will be a function that receives a recipe as parameter and returns another function which will be used for the onClick method:

<button className="btn btn-outline-primary" onClick={this.viewRecipe(recipe)}>

Or you can use also the techniques described in the docs which are the following:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

edited Apr 20, 2018 at 20:31

answered Apr 20, 2018 at 20:24

Rodrigo Ferreira

1,1018 silver badges11 bronze badges

Collectives™ on Stack Overflow

ReactJS - Access key of container div on click?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related