React.js toggle faq type style - reactjs

Question

Just wanted to implement toggling faq type style. I have tried couple different ways but I can't seem to get it right. Basically i want to be able to expand the paragraph when the button is click. The paragraphs should expand one at a time. The code below is able to expand and close the paragraph one at a time as well but if you click on different button and there is an open paragraph, it just closes the first paragraph instead of opening the other paragraph.
Here is a link to sandbox as well: https://codesandbox.io/s/pensive-lichterman-nmjpy?file=/src/App.js:0-886
import { useState } from "react";
import "./styles.css";
import { info } from "./data";
export default function App() {
const [itemId, setItemId] = useState(null);
const [expand, setExpand] = useState(false);
const handleClick = (id) => {
setItemId(id);
setExpand((preState) => !preState);
};
return (
<div className="details">
{info.map(({ title, details, id }, i) => {
return (
<div key={id} className="details-wrapper">
<div>
<h3 className="title">{title}</h3>
<button onClick={() => handleClick(id)}>+</button>
</div>
<p
className="text"
style={{
display: itemId === id && expand ? "block" : "none"
}}
>
{details}
</p>
</div>
);
})}
</div>
);
}

Answer 1

You are only keeping a single id and expand state. So no matter what you do, when the page is re-renedered onClick it sees a single id and only sets the display style for that id.
If you wish to control each element separately then they each need their own expand state saved. There are several ways to do this, but it's probably best to create an "Expandable" component that saves its own state. Something like this:
https://codesandbox.io/s/polished-rain-xnez0?file=/src/App.js

Answer 2

Pretty much, I create a state for each paragraph. That’s what you need to create individual components with their own state.
export default function App() {
return (
<div className="details">
{info.map(({ title, details, id }, i) => {
return <ItemParagragh key={id} title={title} details={details} />;
})}
</div>
);
}
const ItemParagragh = ({ title, details }) => {
const [expand, setExpand] = useState(false);
const handleClick = () => {
setExpand((preState) => !preState);
};
return (
<div className="details-wrapper">
<div>
<h3 className="title">{title}</h3>
<button onClick={() => handleClick()}>+</button>
</div>
<p
className="text"
style={{
display: expand ? "block" : "none"
}}
>
{details}
</p>
</div>
);
};