How To Check If An Element Exists In An Array In React

Includes() method is one of the method to check if an element exists in an array in React. So how to do it? Let’s go into detail now.

Check if an element exists in an array in React

Using includes() method

The includes() method will be helpful, it returns a boolean value.

Syntax:

array.includes(element, start)

Parameters:

• element: Element that you want to check if it exists in your array.
• start: The position that you want to start check.

Example:

import React from "react";
import ReactDOM from "react-dom/client";

const animalList = [
    "Allen’s Swamp Monkeys",
    "African Wild Dog",
    " African Wild Dog",
    "British Wild Cats",
    "Chipmunk",
];

console.log(animalList.includes("African Wild Dog", 1));
console.log(animalList.includes("cat"));
console.log(animalList.includes());
ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode></React.StrictMode>
);

Output:

true
false
false

If I use the includes method without any value, it will return false.

Using indexOf() method

The indexOf() method will help you to check if an element exists in the array by returning the position of the index of the first element that match. If not it will return -1 mean not found.

Syntax:

array.indexOf(element, start)

Parameters:

• element: The element that you want to check the existence.
• start: The position that you want to start searching for.

Example:

import React from "react";
import ReactDOM from "react-dom/client";

const animalList = [
    "Allen’s Swamp Monkeys",
    "African Wild Dog",
    " African Wild Dog",
    "British Wild Cats",
    "Chipmunk",
];

console.log(animalList.indexOf("African Wild Dog", 1));
console.log(animalList.indexOf("cat"));
console.log(animalList.indexOf());
ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode></React.StrictMode>
);

Output:

1
-1
-1

Using find() method

The find() will help you to check if an element exists by looping over the entire array and if the element’s condition matches, the element will be returned. If no element is found, undefined will be returned.

Syntax:

array.find(callback(element, index))

Parameters:

• callback: The callback will be called for each loop of one array element.
• element: The current element.
• Index: The index of the current element.

Example:

import React from "react";
import ReactDOM from "react-dom/client";

const anArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const elementFound = anArray.find((ele, index) => {
    return ele == 5;
});

const elementNotFound = anArray.find((ele, index) => {
    return ele == 11;
});

console.log(elementFound);
console.log(elementNotFound);
ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode></React.StrictMode>
);

Output:

5

Summary

In this article, I showed you some ways to check if an element exists in an array in React. You can use includes() method, indexOf() method or find() method. It is up to your purpose.

Maybe you are interested:

• Update an Object in an Array in React State
• Check if Variable is Undefined in React
• React.Children.only expected to receive single React element child

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm