I currently have an array called options which is mapped into a React component like so:

{options.map((option) => (
   <Component key={option.code}></Component>
))}

However, I am trying to expand my component so that if a boolean value: shouldCount is true, then the optionsWithCount array is passed to the component instead of the options array. The component above has a lot more props etc than shown so I'd like to avoid just repeating the component with all of its props if possible.

Can anyone suggest a possible way of going about this?

CodePudding user response：

Would using a utils function getOptions() work? It would take in the shouldCount flag as input and return the desired array. Example:

{ 
  getOptions(shouldCount).map((option) => (
    <Component key={option.code}></Component>
  ));
}

const getOptions = (shouldCount) => {
  return shouldCount ? optionsWithCount : options;
}

CodePudding user response：

You can update the options variable conditionally so you don't have to rewrite the same code again.

Make options a state;

const [options, setOptions] = useState([])

And use useEffect to update it;

useEffect(()=>{
    if(shouldCount) setOptions([1,2,3,4,5])
    else setOptions([5,6,7,8,9])
}, [shouldCount])

So that way, when shouldCount changed it will trigger useEffect and change optinos values.