How to validate an array if it has objects inside it or not? React JS

Asked

Viewed 370 times

3

I have a code made using React JS and it works like this, I have a select component, and this is reused several times and the information it receives always comes from an array, only now I need to send an array of objects as can be seen:

const plans = [{"text" : "PRO","value" : 1},{"text" : "PRO","value" : 1}]

Here I call my component and make it receive the values of this object array:

<Select
    onChange={value => setQuery(Object.assign(query, { tipoUsuario: value }))}
    placeholder="Selecione o plano"
    items={plans}
/>

Here is my component:

export default props => {
    return (
        <div className="inline-block relative w-64">
            <select
                onChange={input => props.onChange(input.target.value)}
                className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none"
            >
                <option>{props.placeholder}</option>
                {props.items.map((element, key) => {
                    return <option key={key} value={element.value}>{element.text}</option>
                })}
            </select>
    )
}

I need this component of mine to be able to receive my object array, only when receiving it it needs to do a check if it is a common array or if it is an array with objects inside, because that way it receives the object, only that when I need a select that only uses a simple array a the application breaks, then I need this check so that when it is not an array with objects my component would be like this:

<option key={key}>{element}</option>

I’ve done a lot of research and I can’t find anything to help me.

Solution: 

export default props => {
    return (
        <div className="inline-block relative w-64">
            <select
                onChange={input => props.onChange(input.target.value)}
                className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none"
            >
                {props.placeholder && <option>{props.placeholder}</option>}
                <ListOptions items={props.items} />
            </select>
    )
}

const ListOptions = ({ items }) => {
    if (items)
        return items.map(element => {
            return typeof element === 'string' ? (
                <option>{element}</option>
            ) : (
                <option key={element.value} value={element.value}>
                    {element.text}
                </option>
            )
        })
    return <option>None</option>
}```
javascript react dom redux jsx

  • Hi Anderson, all right? Dude, I don’t quite understand your code. Like, you have a component <Select /> received as items to constant plans. Why does it change from array to array of objects? Would it be able to better detail the code even showing the complete method? The @Helloworld answer works, but sometimes a simple change there might not even need to add another function.

  • It is not just a <Select /> component, there are two more, and these two receive a common array, while only one of them receives this object array.

1 answer

4


If all the data of each index of your array is of the same type, you can check the type of one of the indices and based on that choose which type of option you will render.

You can check like this:

if(typeof(element[0]) === 'object') {
   renderOption1()
} else {
   renderOption2()
}

Browser other questions tagged javascript react dom redux jsx

You are not signed in. Login or sign up in order to post.