How to set dynamic inner text with React.createElement()?

By Gulshan Saini
Published in ReactJS
July 19, 2020
1 min read

We now know how to create a react element using React.createElement() method.

To set the dynamic text content of an element, we can pass the text as the third argument to React.createElement() as props.

Let’s see how

We will kick off this tutorial with the following code that

  • imports React and ReactDOM
  • <script> tags to contain React code
  • has a root element with id of root, to render the React application using ReactDOM.render() method

To create a React element we have to use the React.createElement() method. We can hardcode the text as third argument inside React.createElement() as we can see below.

However, if the text is dynamic we have to use the props to set inner text.

So we will change the above code and pass props as a function argument to arrow function as follows.

When we now call this element we have to create a attribute of text to set inner text as follows

Final Code

If you save the above code inside an HTML file and load in the browser, you should see text Dynamic Text that is rendered by React.

set dynamic inner text with React.createElement()
set dynamic inner text with React.createElement()


Previous Article
How to lazy load iframes?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to create a React component?

July 16, 2020
2 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usContact UsBrowserCSSPythonPuppeteer

Social Media