"Fill" in Data to one Template Page - reactjs

Question

Im looking for a solution to build a Template website in React which displays a Carousel with 3 different Images on the Left Part and a Informational Part on the Right with A Title, some Attributes and a Description. I dont want to Copy and Paste the Website all the Time to rewrite every element and Change the Pictures. The Barebone of my Page is done, i just need the Solution to probably make an Array and depended on the Image which is clicked, youre getting to the mentioned DescriptionPage filled with the Information based on the clicked Image.
const DescriptionPage = () => {
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false"/></CarouselItem>
</Carousel>
<div className='CardDescription '>
<div className='Title'>
<h1>The Fool</h1>
</div>
<div className='Element'>
<h2>Element</h2>
<p>Air</p>
</div>
<div className='Zodiac'>
<h3>Zodiac / Planet</h3>
<p>Uranus</p>
</div>
<div className='Qualities'>
<h3>Qualities</h3>
<p>Freedom <br/>
Lust for Life<br/>
Beginnings<br/>
Adventure</p>
</div>
<div className='Symbols'>
<h3>Symbols</h3>
<p> White Rose <br/>
Small Bundle<br/>
Small Animal<br/>
Precipice</p>
</div>
<div className='ShortDescription'>
<h2>Description</h2>
<p>Into the Unkown.... this is placeholder Text for the Fool as he is, a Placeholder, the nothing before there is with all the Options to go anywhere and be anyone he'd like to. Pure AIR!</p>
</div>
</div>
</div>
</>
)
}
export default DescriptionPage
I was trying to find the Correct Syntax and was thinking about Mapping over an Array containing the Data but i dont know how to choose the correct Array or Dataset based on the clicked Image. Would i use useState to change the State of the Page itself or is it the best approach to "load" the Description Page with the Data stored in a different file?

Answer 1

You can write like this, if I understand you correctly
const INTIAL_VALUES = [
{
className: "Title",
heading: "The Fool",
paragraph: ""
},
{
className: "Element",
heading: "Element",
paragraph: "Air"
}, {
className: "Zodiac",
heading: "Zodiac / Planet",
paragraph: "Uranus"
}, {
className: "Qualities",
heading: "Qualities",
paragraph: "Freedom Lust for Life Beginnings Adventure"
}]
const DescriptionPage = () => {
const [state, setState] = useState(INTIAL_VALUES)
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false" /></CarouselItem>
</Carousel>
<div className='CardDescription '>
{state.map((element, key) => (<div key={key} className={element.className}>
<h3>{element.heading}</h3>
<p>{element.paragraph}</p>
</div>))}
</div>
</div>
</>
)
}
export default DescriptionPage