I need to access an item inside an array inside an array how to go about it (react & javascript)

Question

I have a Patient array inside of every patient there is a relatives array inside is an id and a relationship I want to show the relationship based on the id here is an image for the data [![enter image description here][1]][1]

 props.data.slice(0, props.n).map((item) => {
                    return (
                            <Grid item xl={4} md={4} xs={4}>
                                <Link to={`/patient/${item.id}`} style={{ textDecoration: 'none', color: theme.palette.text.primary }}>
                                    <Card boxShadow={3} key={item.id} style={{ backgroundColor: theme.palette.card }}>
                                        <CardImg src={item.imgUri} alt={item.name} onError={addDefaultSrc} />
                                        //here I want to show the relationship
                                    </Card>
                                </Link>
                            </Grid>
   )
}

now to explain it more I have the for every patient a page and there are relative patient section the i render every paitent passed on the rletiveid now i already have the patient id stored now i wont to go throe all the relatives array and find where is == the patient id that i stored and return the relationshop the rletiveid should be unique it means every patient should return one relationshop

Answer 1

You just need to map again on your relatives.

 props.data.slice(0, props.n).map((item) => {
     return (
         <Grid item xl={4} md={4} xs={4}>
              <Link to={`/patient/${item.id}`} style={{ textDecoration: 'none', color: theme.palette.text.primary }}>
                 <Card boxShadow={3} key={item.id} style={{ backgroundColor: theme.palette.card }}>
                   <CardImg src={item.imgUri} alt={item.name} onError={addDefaultSrc} />
                      {item.relatives.map(relative => (<span key={relative.relativeId}>{relative.relationship}</span>))}
                 </Card>
              </Link>
         </Grid>
   )
}