Selecting only child element and not other elements with same class React?

1

Here is the link to the code: http://codepen.io/roman_fedoruk/pen/zZapmM?editors=0011

This is about the Recipe Box

I’ll post some of the code anyway:

This is the basic code that I have mapped to each recipe:

                    <div>
					<p className="toggle" onClick={this.handleClick.bind(this)}>{recipe.name} </p>
					<div className="textToHide">{recipe.ingredients}</div></div>

So, if you click that link (and I guess also create more than 1 recipe), and you try to click on a recipe to see the ingredients, all of the recipes will expand. I have tried many things that seem to work in regular JS, but that I can’t seem to get to work in REACT

Here is an example: $('.btn').on("click",function(){ $(this).parent().find('p').css("display", "block");

This was working on a seperate pen, but I can’t seem to get it to translate.

Anybody know how to fix this? should I change the way I map the recipes? Any suggestions would be awesome!

EDIT:

Figured it out!

If anyone is having a similar problem, here is the code that worked for me:
par.find(".textToHide").css('display', 'block');

2

If you try to click on a recipe to see the ingredients, all of the other recipes will also expand.

Looks like a selector problem. It seems you only need the child of the parent element only.
Therefore, using the ‘>’ combinator might work well for you when addressing the class.

The ‘>’ combinator selects nodes that are direct children of the former specified element.

  • MDN

Example:

/* This will only select .class inside parent only... */
parent > .class

Good luck.

1 Like
3

But how can I do that in my JS code? Currently, I am using: $('.toggle').next('.textToHide').css('display', 'block'); But like I mentioned, that causes all the recipes to expand.