How to check if the array of object is null using react and javascript?

Question

I am mapping an array of objects and rendering a div based on it.

Below is my code:

const App = () => {
    const types = React.useMemo(() => {
        return get(data, 'something.typesDetails', []);
    }, [data]);

    return (
        {true &&
            <div> header </div>
            <div>
                {types.map((t => {
                    return (
                        <div>{type.name}</div>
                    )
                })}
            </div>
        }
    );
}

Here is the types array:

const types = [
    {
        id: '1',
        name:  'type1',
    },
    { 
        id: '2',
        name: 'type2',
    },
]

The above code works fine when data structure is like above.

But consider if types has value like so

const types = [
    {
        id: null,
        name: null,
    }
]

In this case, it will still map through types and display div. I don't want to display div element. How can I check if types value contains null or stop looping through types if it has value like above?

Unmitigated · Accepted Answer · 2021-02-10 15:41:13Z

2

You can use filter to remove elements with null values.

types = types.filter(x => !Object.values(x).includes(null));

You can also use Array#every to check:

if(types.every(x => !Object.values(x).includes(null)){
  //go ahead with mapping
}

answered Feb 10, 2021 at 15:41

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miraziz · Accepted Answer · 2021-02-10 15:41:53Z

0

You can filter object inside of array and then map through them:

return (
    {true &&
        <div> header </div>
        <div>
            {types.filter(t => t.id != null && t.name != null)
                  .map((t => {
                       return (<div>{type.name}</div>)
            })}
        </div>
    }
);

answered Feb 10, 2021 at 15:41

Miraziz

5091 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to check if the array of object is null using react and javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related