Trying to pass down an array of uniqueWords.

On Charts initial mount uniqueWords comes in as undefineed,

I try to do a ( uniqueWords && uniqueWords) check to no success.

Although in Filter where I map through uniqueWords I use the same check and it works.

I know this may be a simple question but I am baffled.

Home

const Home = () => {
    const [uniqueWords, setUniqueWords] = useState()
    const [filter, setFilter] = useState(null)

    const handleData = () => {
        const categoryData = data.map(word => word["Parent Category"])
        const uw = [...categoryData.reduce((map, obj) => map.set(obj, obj), new Map()).values()]
        setUniqueWords(uw)
    }

    useEffect(() => {
        handleData()
    }, [])

    return (
        <div className={`w-screen h-screen bg-[#121212] text-xl text-gray-400 overflow-x-hidden`}>
            <Filter
                setFilter={setFilter}
                uniqueWords={uniqueWords}
            />
            <div className={`flex h-[70%]`}>
                <Charts
                    uniqueWords={uniqueWords}
                />
            </div>
            <div className={`flex-grow bg-slate-900`}>
                <DataTable filter={filter}/>
            </div>
        </div>
    )
}

Charts - undefined error

const charts = ({uniqueWords}) => {
    const [data, setData] = useState([])
    
    const {uw} = uniqueWords && uniqueWords

    const fdata = () => {
        for (let i = 0; i <= uniqueWords[i].length; i  ) {
            setData(mdata.filter(items => items.name === uniqueWords[i]))
            console.log('test')
        }
    }

    useEffect(() => {
        fdata()
    }, [])

Filter - working check

const Filter = ({setFilter, uniqueWords}) => {
    const handleClick = (item) => {
        setFilter(item.item.toLowerCase())
    }

    const handleReset = () => {
        setFilter(null)
    }

    return (<div className={`absolute top-4 left-4 flex-col shadow-xl z-20 h-min w-max`}>
            <div className={`p-4 bg-slate-900`}>
                {uniqueWords && uniqueWords.map(item =>
                    <div key={Math.random()} className={`flex items-center mb-2`}>
                        <input type={'checkbox'}/>
                        <div onClick={() => handleClick({item})} className={`ml-2 text-sm`}>{item}</div>
                    </div>
                )}
                <div className={`flex  items-center w-full mt-4 rounded-md bg-slate-800`}>
                    <div onClick={() => handleReset()}
                         className={`text-md w-full text-center cursor-pointer p-2`}>Reset</div>
                </div>
            </div>
        </div>
    )
}

export default Filter

CodePudding user response：

You cannot destructure array as objet.

Const {uw} = someArray

Is not valid syntax. Use [] instead of {}

CodePudding user response：

This is the best option I have been able to come up with. Although it seems really hacky.

declare const of uw using state.

only run function if uw exists.

Watch for updates on uw & uniqueWords

    useEffect(() => {
        if (uniqueWords) {
            setUw(uniqueWords)
            if (uw) {
                fdata()
            }
        }
    }, [uniqueWords, uw])