- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
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.
To Continue Learning Please Login
Login with Google