ReactJS - isElement()

---

---

React Js library is all about splitting the app into various components. Each Component has its personal lifecycle. React offers us a few in-built methods that we are able to override at specific stages inside the life-cycle of the component.

In this tutorial, we are able to know the way to use the isElement() method. The isElement() method returns true if an element is a react element.

So, in simple terms, if we want to find out whether a specific thing on our web page is a part of our React application or not, we can use the isElement() method. This method is useful for understanding and managing the elements in our React application. It is a handy tool when we are working with different pieces of our app and need to know if they are React elements or not.

Syntax

var item = isElement(elem);

Parameters

elem − It is an element to which we have to check that it is a React element or not.

Return Value

It returns true if the element is a React element and false otherwise.

Examples

Example

So, first, we will create a React project, and then we will open the App.js file in the src folder. Within this file, we will write the logic to determine whether or not the input element is a React element. As a result, the code for this concept is as follows −

import React from 'react';
import { isElement } from 'react-dom/test-utils';

// Define the App Component here
function App () {

   // Function to show the isElement() method
   function func() {
      var a = isElement(el);
      console.log("The Following is an element :", a);
   }   
   const el = <div>
      <h1>element</h1>
   </div>
   
   // Our JSX code
   return <>
      <div>
         <h1>Tutorialspoint</h1>
         <button onClick={func}>Click Me !!</button>
      </div>
   </>
}

// Export our App Component
export default App;

Output

In the above code we have a component which verifies if someElement is a React element when we click the "Click Me!" button. The result is shown in the console.

Example − Checking DOM Element

This app shows how to use the React.isValidElement() method to find whether a specific JSX element (in this case, a <div>) is a valid React element. The result is then displayed in the component, providing a simple check for the nature of the element. The code for this app is shown below −

import React from 'react';

const App = () => {
const divElement = <div>Hello, I'm a div element!</div>;
const isReactElement = React.isValidElement(divElement);
   return (
      <div>
         <p>Checking if a DOM element is a React element:</p>
         {isReactElement ? (
            <p>Yes, the element is a React element!</p>
         ) : (
            <p>No, the element is not a React element.</p>
         )}
      </div>
   );
};

export default App;

Output

In the above example we can see that the div is a DOM element so the result is true so it will print “Yes, the element is a React element!” and if we give a non DOM element so it will print the false statement.

Example − Checking Function Component

This app shows how to use the React.isValidElement() method to check if a component ‘MyComponent’ class is a valid React element. The result is then displayed in the component for providing a simple check for the type of the element.

import React from 'react';

class MyComponent extends React.Component {
   render() {
      return <div>Hello, I'm a React component!</div>;
   }
}
const App = () => {
   const elementToCheck = <MyComponent />;
   const isReactElement = React.isValidElement(elementToCheck);
   
   return (
      <div>
         <p>Checking if a component is a React element:</p>
         {isReactElement ? (
            <p>Yes, the element is a React component!</p>
         ) : (
            <p>No, the element is not a React component.</p>
         )}
      </div>
   );
};

export default App;

Output

So as per the above output we can say that if the component is a React element then it will show a yes message otherwise it will say No it is not a React element.

Summary

So, the isElement() function in React is used to figure out that a given object is a valid React element. If the element argument is any React element, it returns true; otherwise, it returns false. This function is commonly used in React components for type-checking and validation to ensure that the input is a valid element.