Toggle button inside map - reactjs

Question

I'm trying to set a toggle inside a map , it activates with a button , now i handled to difference between every single item of the card but there's one problem, since the state changes, i mean i'm not updating it, the state doesn't let me have several buttons activated, i tried making the initial state an array of objects but i can't upload one single position of the array...
here's the code:
Handler
//hooks
const [detail, setDetail] = useState([{
id: '',
state: false,
}]);
const handleClick = (e, id) => {
setDetail({ ...detail, id: id, state: !detail['state'] })
}
Map
<div className={Styles.wrapper}>
{
artistSales && artistSales.map(s => {
return (
<div className={Styles.align}>
<div className={Styles.card}>
<div className={Styles.order}>
<h2>Numero de orden: {s.id_order}</h2>
<p>Estado de pago: {s.state === 'fullfilled' && 'pago realizado'} </p>
<p>Cliente: {s.userId.name} {s.userId.lastname} </p>
<p>Email:
<a href={`mailto:${s.userId.email}`}>{s.userId.email}</a>
</p>
</div>
<div className={Styles.detail}>
<p>Total: ${s.total_price}</p>
<p>Fecha: {s.createdAt.slice(0, 10)}</p>
<button value={s.id_order} onClick={(e) => handleClick(e, s.id_order)} className={Styles.btn}>Ver detalles</button>
</div>
</div>
{detail.id === s.id_order && detail.state === true && <div>
hello
</div>}----> this is what should be displayed when you click the button

Answer 1

you need to first find a matching id. if there is none you should add it to array, otherwise make a copy from the match with new state value.
you can create also a function to check if for a given id that specific state value to render your content logic:
const [details, setDetails] = useState([]);
const handleClick = (e, id) => {
setDetails(details => {
// find index for matching detail
const detailIndex = details.findIndex(d => d.id === id)
// no match return new state
if (detailIndex === -1) {
return [...details, { id, state: true }]
}
// with match create copy details
const nextDetails = [...details]
// create copy of detail with a flipped state value
const state = !nextDetails[detailIndex].state
nextDetails[detailIndex] = { ...nextDetails[detailIndex], state }
return nextDetails
})
}
// function to get artist detail state
const detailForArtist = ( id ) => {
const detail = details.find(d => d.id === id)
return detail?.state
}
{ detailForArtist(s.id_order) && <div>hello</div> }