Trigger event for each data in object

As the title states, I want to show the right (hidden by default) solution for each individual riddle.

I have mapped 2 times through the same object, stories and placed the question and solution in 2 different div's.

<div id="cardsContainer">
    <h1>All our cards</h1>
    <div id='cardsOverview'>
      {
         stories.map((story, index) => <Story key={index} id={story.id} title={story.title} desc={story.desc} grade={story.grade}  /> )
      }
    </div>
</div>
<div id="cardDetailContainer">
    {
        stories.map((story, index) => <Story key={index} id={story.id} solution={story.solution} /> )
    }                
</div>

I thought on creating an event listener inside a foreach and get the target that it's clicked on. After I get the target and parent, I can list through the same object and get the solution. Is this the right way of thinking, or am I oversimplifying things?

const stories = [
{
    id: 1,
    title: 'First black story',
    desc: 'Ga jij de eerste black story kunnen oplossen?',
    grade: 'Hard',
    solution: 'This is the solution for the first story.'
},
{
    id: 2,
    title: 'Second black story',
    desc: 'Ga jij de tweede black story kunnen oplossen?',
    grade: 'Makkelijk',
    solution: 'This is the solution for the second story.'
},
{
    id: 3,
    title: 'third black story',
    desc: 'Ga jij de tweede black story kunnen oplossen?',
    grade: 'Medium',
    solution: 'This is the solution for the third story.'
}
];