How can I update the props.data from a child component?-CodePudding

I am trying to display a range from an array that is being passed into a child. My current Parent component is as follows:

import data from './data.json'
return ( 
    <Cell symbol={data.symbol} number={data.number} />
)

And that data is being passed into my Child component:

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 >
        {updatedSymbols}
    </div>
)

QUESTION: If you look at the useEffect, you will notice that within the if-statement, I am selecting the numbers I want and simply passing them into the useState, "setUpdatedSymbols". My problem is that there are too many numbers that I need to select, about 100, how can I push them all into updatedSymbols without using || ?

CodePudding user response：

whatever the numbers list you want to check before you insert into your state you can collectively do this

    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 >
            {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