CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxcomponents
unhackit
unhackit

Reputation: 561

How can I pass props to components from different sources?

I have a component 

<Box/>

I would like to pass props into this array from different sources. The problem is that each time I map over the two functions and pass their values to the component, it makes the component render separately for each source making the component render more times than I want.

for example this is what I do

return summaryData.map((item, i) => {
         const { name, number } = item
         return tableData.map((item, i) => {
          const { row, column } = item
            return <Box key={i} name={name} number={number} row={row} column={column}/>
        })
     })

The box renders the number of times each function runs individually, but I want both functions to run simultaneously and pass in data to the box component

Upvotes: 1

Views: 153

Answers (2)

ZKe
ZKe

Reputation: 101

In your code, I found you want to map attributes of summaryData and tableData in the same order right? I assume they are lists of objects. You can try this:

return summaryData.map((item, i) => {
         const { name, number } = item
         return <Box key={i} name={name} number={number} row={tableData[i].row} column={tableData[i].column}/>
        })
     })

Hope it works.

Upvotes: 1

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

You could join the two arrays like below and map it once.

return summaryData.reduce((acc,{name,number},index) => {
  acc.push({
    name,
    number,
    row: tableData[index].row, //assuming you want value from the same index
    column: tableData[index].column} )
  return acc;
},[])
.map(({name,number,row,column},i) => (<Box key={i} name={name} number={number} row={row} column={column}/>));

Upvotes: 1

Related Questions