Creating React Components using createElement method

The createElement method in React is a fundamental way to create React elements. It allows you to create elements without JSX, which can be useful in certain situations or for those who prefer to use plain JavaScript.

Syntax

createElement(type, [props], [...children])

 

1.   type: This is the type of the element you want to create (e.g., a string for standard HTML elements like 'div', or a React component).

2.   props: An optional object containing the properties (props) you want to pass to the element. This can include attributes and event handlers.

3.   children: Any child elements or text content you want to include inside the created element. This can be a single child or an array of children.

 

Example

export default function UserProfile() {
  return createElement(
    "div",
    null,
    <div>
      <h1>User Basic Information</h1>
      <ul>
        <li>First Name: Krishna</li>
        <li>Last Name: Gurram</li>
        <li>Age: 35</li>
      </ul>
    </div>
  );
}

You can add any number of children to the UserProfile component. For example, following snippet enhance above component by adding Hobbies section.

export default function UserProfile() {
  return createElement(
    "div",
    null,
    <div>
      <h1>User Basic Information</h1>
      <ul>
        <li>First Name: Krishna</li>
        <li>Last Name: Gurram</li>
        <li>Age: 35</li>
      </ul>
    </div>,
    <section>
      <h1>Hobbies</h1>
      <ul>
        <li>Trekking</li>
        <li>Cooking</li>
        <li>Blogging</li>
      </ul>
    </section>
  );
}

Follow step-by-step procedure to build a working application.

 

Step 1: Go to the post (Quickly Set Up aReact Project with Vite: A Step-by-Step), and set up a React Project ‘create-element-demo’

 

Project structure looks like below.

Step 2: Create a folder components in src/ folder and define UserProfile component like below.

 

UserProfile.jsx

 

import { createElement } from "react";

export default function UserProfile() {
  return createElement(
    "div",
    null,
    <div>
      <h1>User Basic Information</h1>
      <ul>
        <li>First Name: Krishna</li>
        <li>Last Name: Gurram</li>
        <li>Age: 35</li>
      </ul>
    </div>,
    <section>
      <h1>Hobbies</h1>
      <ul>
        <li>Trekking</li>
        <li>Cooking</li>
        <li>Blogging</li>
      </ul>
    </section>
  );
}

Step 3: Update main.jsx like below.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import UserProfile from './components/UserProfile'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <UserProfile />
  </StrictMode>,
)

Total project structure looks like below.

 

Step 4: Build and run the application.

 

cd create-element-demo
npm install
npm run dev

 

Open the url ‘http://localhost:5173/’ in browser, you will see below kind of screen.

 

Is createElement Still Used?

Yes, while JSX is more commonly used because it’s more readable and intuitive, createElement is still relevant, especially in scenarios where you might need to generate elements programmatically or in a dynamic context. Understanding createElement is also beneficial for grasping the underlying workings of React.

 

This method is often used in libraries and tools that interact with React at a lower level or when building certain types of components programmatically. However, for most everyday usage, JSX is the preferred method due to its clarity and ease of use.

 

You can download this application from this link.

 

Previous                                                    Next                                                    Home