Actualmente tengo una matriz llamada options que se asigna a un componente React así:
{options.map((option) => ( <Component key={option.code}></Component> ))} Sin embargo, estoy tratando de expandir mi componente para que si un valor booleano: shouldCount es verdadero, entonces la matriz optionsWithCount se pasa al componente en lugar de la matriz de options . El componente anterior tiene muchos más accesorios, etc., de los que se muestran, por lo que me gustaría evitar repetir el componente con todos sus accesorios si es posible.
¿Alguien puede sugerir una posible manera de hacer esto?
¿Funcionaría el uso de una función utils getOptions() ? Tomaría el indicador shouldCount como entrada y devolvería la matriz deseada. Ejemplo:
{ getOptions(shouldCount).map((option) => ( <Component key={option.code}></Component> )); } const getOptions = (shouldCount) => { return shouldCount ? optionsWithCount : options; }Puede actualizar la variable de opciones condicionalmente para que no tenga que volver a escribir el mismo código.
Hacer de las opciones un estado;
const [options, setOptions] = useState([]) Y use useEffect para actualizarlo;
useEffect(()=>{ if(shouldCount) setOptions([1,2,3,4,5]) else setOptions([5,6,7,8,9]) }, [shouldCount])De esa manera, cuando shouldCount cambie, activará useEffect y cambiará los valores de optinos.