0
I have a map of a array object.
<S.Section>
{data.slice(oldItems, showItems).map((it, index) => {
return (
<>
<S.Box key={index} onClick={openDetails}>
<S.Image src={it.picture.large} />
<S.Gender>{it.gender === "male" ? "Masculino" : "Feminino"}</S.Gender>
<S.Name>
{it.name.title} {it.name.first} {it.name.last}
</S.Name>
<S.Email>{it.email}</S.Email>
</S.Box>
{openInfo && (
<Details data={it} toggleModal={openDetails} />
)}
</>
);
})}
</S.Section>
I wanted to: when clicking on a Box, it opened only the modal with the information of the Box clicked. The problem: All Boxes that are in the map current, when clicking on any one are being opened. I believe the problem lies in the referencing of data={it} for the it has all the objects of map and I can’t tell them apart, because I don’t have an ID coming from api.
One of the objects coming from api (dice fake)
{
"gender":"female",
"name":{
"title":"mrs",
"first":"ione",
"last":"da costa"
},
"location": {
"street":"8614 avenida vinícius de morais",
"city":"ponta grossa",
"state":"rondônia",
"postcode":97701,
"coordinates":{
"latitude":"-76.3253",
"longitude":"137.9437"
},
"timezone":{
"offset":"-1:00",
"description":"Azores, Cape Verde Islands"
}
},
"email":"[email protected]",
"dob":{
"date":"1968-01-24T18:03:23Z",
"age":50
},
"registered":{
"date":"2004-01-23T23:54:33Z",
"age":14
},
"phone":"(01) 5415-5648",
"cell":"(10) 8264-5550",
"picture":{
"large":"https://randomuser.me/api/portraits/women/46.jpg",
"medium":"https://randomuser.me/api/portraits/med/women/46.jpg",
"thumbnail":"https://randomuser.me/api/portraits/thumb/women/46.jpg"
}
}
How are the objects coming from the API? Post them too.
– Rebeca Nonato
I edited the question with the object
– Wellington Roth
Even if the API does not specifically have an ID you can see some information that it does not repeat and use as the key parameter in the map. In this case above I think it could be the email, but I believe that this API has a field called uuid that would look great to use, only in the case Voce has to make your application return this field in fetch
– Rafael Costa
How is the method
openDetails?– Costamilam
Is: const [openInfo, setOpenInfo] = useState(false); const openDetails = () => { setOpenInfo(!openInfo); }
– Wellington Roth
Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.
– Bacco