When Mapping over a react component how and where can i call a function to return a property value i-CodePudding

I'm currently working with a data structure that looks like this:

allPersons:[
    { discoveriesByType:[
        {type:'car',pending:0,confirmed:10, discoveries:[{data...}]},
        {type:'truck',pending:1,confirmed:25, discoveries:[{data...}]}
      ]
    },
    { discoveriesByType:[
        {type:'suv',pending:0,confirmed:10, discoveries:[{data...}]},
        {type:'atv',pending:1,confirmed:25, discoveries:[{data...}]}
      ]
    }
]

This data structure is represented in the component file as props.resultItemData which looks like this and returns the ResultItem component.

<>
{ props.resultItemData.map((data, index) => {
      return(
        <ResultItem carOnlyPendingValue={this should be the value of discoveriesByType.type === 'cars' pending: its value} atvOnlyPendingValue={value} />
      )
  }
}
</>

Where in this file would I create a function to grab only the discoveriesByType.type === "suv" value of pending?

CodePudding user response：

The simplest way is to calculate the value and place it in a variable before the render function. No need for useState or other. See working demo:

function ResultItem({ carOnlyPendingValue, atvOnlyPendingValue }) {
  return <div style={{ border: '1px solid black' }}>
    ResultItem (Person):<br />
    <pre>carOnlyPendingValue: {carOnlyPendingValue} - atvOnlyPendingValue: {atvOnlyPendingValue}</pre>
  </div>;
}

function getPendingValueForType(discoveriesByType, type) {
  const discovery = discoveriesByType.find(d => d.type === type);
  return discovery ? discovery.pending : `<discovery '${type}' not found>`;
}

function MyComponent(props) {
  return (
    <div>
    { props.resultItemData.map((data, index) => {
        const carOnlyPendingValue = getPendingValueForType(data.discoveriesByType, 'car');
        const atvOnlyPendingValue = getPendingValueForType(data.discoveriesByType, 'atv');
        return(
          <ResultItem carOnlyPendingValue={carOnlyPendingValue} atvOnlyPendingValue={atvOnlyPendingValue} />
        );
      })
    }
    </div>
  );
}

function App() {
  const data = {
    allPersons:[
      { discoveriesByType:[
          {type:'car',pending:0,confirmed:10, discoveries:[{data: 'c'}]},
          {type:'truck',pending:1,confirmed:25, discoveries:[{data: 't'}]}
        ]
      },
      { discoveriesByType:[
          {type:'suv',pending:0,confirmed:10, discoveries:[{data: 's'}]},
          {type:'atv',pending:1,confirmed:25, discoveries:[{data: 'a'}]}
        ]
      }
    ]
  };
  return (
    <div><MyComponent resultItemData={data.allPersons} /></div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

If instead of a simple .find() you do complex calculations, you can wrap it with useMemo().