Show corresponding div onclick dynamic components [REACT]

Question

I'm creating a riddle game. The questions are showed first with the solution in a hidden div. How can I get the target that's clicked on a specific riddle and show the solution only to that riddle inside another div.

The questions are in an object:

const stories = [
{ id: 1, title: first riddle, solution: this is the first solution }, 
{ id: 2, title: second riddle, solution: this is the second solution }];

I rendered the stories object inside Card components with mapping through all of them:

{ stories.map((story, index) => 
<Story key={index} id={story.id} title={story.title} desc={story.desc} grade={story.grade} /> )}

I tried something alongside onClick={this.handleClick} on the Card component, but I couldn't figure out to show the solution.

Answer 1

So, you have two div. First div it question, second div its solution. And only when I clicked to first div I can show second?

If I right understand case, you can manage state in your Story component, and when you click to first div you can set setShowSolution(true)

UPD:

if you use functional component:

const Story () => {
   ...your code
   const [showSolution, setShowSolution] = useState(false);

   const clickHandler = () => {
       ...your code
       setShowSolution(true);
   };

   return (
     ...your code

     <div onClick={clickHandler}>{question}</div>


     {showSolution && (
        <div>{solution}</div>
     )}

     ...your code
   );
}

or classes

example

class Story extends Component {
  ...your code
  state = {
    showSolution: false
  };

   clickHandler = () => {
       ...your code
       this.setState({ showSolution: true });
   };

   render() {
      return (
         ...your code

         <div onClick={this.clickHandler}>{question}</div>


         {this.state.showSolution && (
           <div>{solution}</div>
         )}

         ...your code
       );
   }

}