JIYIK CN >

Using the method in React find():

1. Call find() on the array.
2. In each iteration, check if the element matches the condition.
3. Rendering result.

const App = () => {
  const employees = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Carl'},
  ];

  const found = employees.find(element => {
    return element.id === 2;
  });

  console.log(found); // 👉️ {id: 2, name: 'Bob'}

  return (
    <div>
      <div>{found && <h2>{found.name}</h2>}</div>
    </div>
  );
};

export default App;

The function we pass to the find method is called for each element in the array.

If the callback function returns a truthy value, the method short-circuits and returns the corresponding array element. If the callback function never returns a truthy value, the find()method returns undefined .

In the function in the example, we check if the id property of the object is equal to 2 and return the result.

const found = employees.find(element => {
  return element.id === 2;
});

console.log(found); // 👉️ {id: 2, name: 'Bob'}

If the condition is never met, the find()method returns undefined , so we need to check before trying to access the object's properties.

<div>
  <div>{found && <h2>{found.name}</h2>}</div>
</div>

Before accessing the name property of the object, we used the logical AND (&&)operator because if the found variable stores an undefined value, we will receive a runtime error.

The logical AND operator returns the value on the right if the value on the left is true (&&). If the variable found stores an undefined value, the operator returns undefined.

We can use this approach because boolean values , null , and undefined are ignored. They are not rendered at all.

None of the following JSX expressions are rendered.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>