I am firing onClick event when a button is clicked. when it gets clicked the div appears and reappears. however, the problem i am facing is if i click a button on particular div , all of the div appears instead of the div I clicked button on. How can i make it work that a particular div appears on which the button was clicked.
As said, we really need to see it live or at least have all the code from a working version we can test. So a repo or a CodeSandbox.
I’m not seeing the behavior you are talking about. Here is an example using your code with a mock response (no search code). I did rename a few things but other than that is should be about the same. As said, each SingleRecipe component has its own state and is working as expected.
I don’t see the problem in your CodeSandbox either.
I’m starting to think you just haven’t explained the problem and looking at the images you posted I also don’t see the problem as explained and asked about.
Is this a CSS problem? Are you just talking about the height of the cards all expanding when opening the recipe in one of the cards? Because the .Recipes container will be as tall as the tallest child element, which would be the card with the recipe details open. There is nothing odd about that. Not that it is how you would want it to look but it isn’t a React or code problem, but a layout issue with CSS.
They are flex items, that’s how it works. You need to learn about flexbox and layouts. You can compare it to an inline-block version to better see what I mean (not suggesting you use it).
/* just a leftover from the old CSS you won't want this either
a positive value might make sense
border: 1px solid #ccc;
box-shadow: 0 5px 5px 0 #aaa;
transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
CodeSandbox inline-block example
BTW, you still need to rename the single_recipe component.
React Hook “useState” is called in function “single_recipe” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. (react-hooks/rules-of-hooks) eslint