CODEWITHSUNDEEP
javascriptreactjsfindantd
Jing c
Jing c

Reputation: 53

find is undefined causing antd Tag to be empty

I'm facing a problem where my "AntTag" component is empty when .find() resolves to undefined if the "ids" array is of "Null" value as there isnt a "Null" value to find in "departments". I need a way to allow me to display "None" if it is undefined. I have tried to do a if-statement to change the name[i] = "None" if it is null, however, it did not work. I have also tried to return name ? {name} : "None" inside however it did not work as well. Can anyone please help me?

    if (_.isArray(ids)) {
      return ids.map((id) => {
        let name = this.state.departments.find((x) => x.id === id)?.name;
        console.log(name);
        return (
          <AntTag className=' cursor-pointer' color='magenta'>
            {name}
          </AntTag>
        );
      });
    }

    return '';
  }

AntTag issue when name is undefined

Upvotes: 0

Views: 90

Answers (1)

user6346643
user6346643

Reputation: 682

This should work by changing the line to use or operator:

const name = this.state.departments.find((x) => x.id === id)?.name || "None";

Upvotes: 1

Related Questions