How to check if element exists in map() React

Question

I have working code

const products = this.state.products.map((product, i) => 
        product.fields.company.fields.slug === this.props.match.params.slug ?
        <Suspense key={i} fallback={<div>Loading...</div>}>
            <ProductListItem id={i} key={i} product={product} />
        </Suspense>
        : null)

        return(
            <div className="partner-details" style={partnerD}>
                <div className="container-xl">
                    <Button type="button" className="btn btn-secondary" onClick={this.props.history.goBack}>
                        <i className="fa fa-arrow-left"></i>&nbsp; Get back
                    </Button>
                    <ul>
                        <div className="product-item">
                            {products}
                        </div>
                    </ul>
                </div>
            </div>             
        )

But the problem is if product.fields.company.fields.slug (company.fields.slug) does not exist my code crashes. How can I add extra ternary operator to check if it product.fields.company exist before execute this product.fields.company.fields.slug === this.props.match.params.slug

Thanks!

You could use (product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug) === this.props.match.params.slug ... but then you'll have another problem because you're not doing anything with the result of the ternary operation. — Titus
– Titus, Commented Mar 11, 2020 at 15:23
Sometimes it's best not to use a ternary expression -- code becomes hard to read. I suggest just using an if statement or 2 to make sure of this — Sterling Archer
– Sterling Archer, Commented Mar 11, 2020 at 15:23
You can use the filter function this.state.products.filter(...).map(...) to remove all elems without a specific field. — Genosite
– Genosite, Commented Mar 11, 2020 at 15:34

Karim · Accepted Answer · 2020-03-11 15:25:25Z

2

if your environment has support for optional chaining you can do this

product?.fields?.company?.fields?.slug === this.props.match.params.slug ?  .. : ..

otherwise you need to check that each field is truthy

product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug === this.props.match.params.slug ? .. : ..

answered Mar 11, 2020 at 15:25

Karim

8,6923 gold badges27 silver badges36 bronze badges

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

Comments

Taki · Accepted Answer · 2020-03-11 15:23:54Z

2

Use optional-chaining ( Babel plugin )

product.fields?.company?.fields?.slug

Or make use of the || operator :

(((product.fields || {}).company || {}).fields || {}).slug

And consider wrapping your compoennt in an error boundary so your app won't crash when there's this kind of errors.

answered Mar 11, 2020 at 15:23

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Comments

radulle · Accepted Answer · 2020-03-11 15:28:32Z

2

In line 2 you can do: (product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug && this.props && this.props.match && this.props.match.params && this.props.match.params.slug && product.fields.company.fields.slug === this.props.match.params.slug) ?

or use optional chaining.

edited Mar 11, 2020 at 15:28

answered Mar 11, 2020 at 15:23

radulle

1,54513 silver badges20 bronze badges

2 Comments

Titus Over a year ago

You've got two product.fields.company in there.

radulle Over a year ago

Thank you, fixed it now and added checks for this, still I think if at all possible optional chaining is much more readable and preferred way of doing this.

Collectives™ on Stack Overflow

How to check if element exists in map() React

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related