How can I map multiple data objects inside my return function?

Question

I have JSON object called finData which holds arrays of data. I would like to map through one array, for my case, finData[0], while also grabbing data from other arrays inside the JSON, ie. finData[1], finData[2], etc...

Everything works fine and dandy mapping through one array. However, when I bring an outside array into my mapping function, things start to act funky:

This works fine

          <Grid container spacing={5} alignItems="flex-end">
                    {finData[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data,index) => {
                    return (
                        <Grid item key={index} xs={12} md={3}>
                            <Card className="miniGraphCards">
                            <CardHeader
                              title={
                                <Chip label={data.symbol}
                                  className="miniGraphTicker"
                              /> 
                              } 
                            subheader={data.adj_close}
                          />
                            <CardContent >
                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>

This does not work

          <Grid container spacing={5} alignItems="flex-end">
                    {finData[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data,index) => {
                    return (
                        <Grid item key={index} xs={12} md={3}>
                            <Card className="miniGraphCards">
                            <CardHeader
                              title={
                                <Chip label={data.symbol}
                                  className="miniGraphTicker"
                              /> 
                                + finData[2][index].company
                              } 
                            subheader={data.adj_close}
                          />
                            <CardContent >
                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>

Plus it seems like I need to attach a filter like this to the JSON key to select the correct matching value during mapping iterations.

.filter((i) => i.symbol === data.symbol)

But it does not work when I do this:

finData[2].company.filter((i) => i.symbol === data.symbol)

As I get this error: TypeError: Cannot read property 'filter' of undefined

How can I use other data points in my JSON, finData and attach a working filter to select it's corresponding symbol key?

Answer 1

you can't concat variable to tag like this, update your title as

title={
        <>
        <Chip label={data.symbol}
           className="miniGraphTicker"
         /> 
         {finData[2][index].company}
        </>
      }