Estoy tratando de mostrar un rango de una matriz que se pasa a un niño. Mi componente principal actual es el siguiente:
import data from './data.json' return ( <Cell symbol={data.symbol} number={data.number} /> )Y esos datos se pasan a mi componente secundario:
const [updatedSymbols, setUpdatedSymbols] = useState() useEffect(() => if(props.number === 1 || props.number === 2 || props.number === 3 ){ setUpdatedSymbols(props.number) console.log("updated: " + props.number) } }, [props.symbol]) return ( <div class="cell"> {updatedSymbols} </div> )PREGUNTA: Si mira el useEffect, notará que dentro de la declaración if, estoy seleccionando los números que quiero y simplemente los paso al useState, "setUpdatedSymbols". Mi problema es que hay demasiados números que necesito seleccionar, alrededor de 100, ¿cómo puedo insertarlos todos en los símbolos actualizados sin usar || ?
cualquiera que sea la lista de números que desee verificar antes de insertarla en su estado, puede hacerlo colectivamente
const [updatedSymbols, setUpdatedSymbols] = useState() const range = (from, to ) => { var collection = []; for(let i = from; i<=to ; i++) { collection.push(i); } return collection; } useEffect(() => if(range(1,100).includes(props.number) ){ setUpdatedSymbols(props.number) console.log("updated: " + props.number) } }, [props.symbol]) return ( <div class="cell"> {updatedSymbols} </div> ) // this is magical trick // [1,2,3,4,5].includes(props.number); //if props.number happens to be in the array then it i'll give true