HomeTutorsContact

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
<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- import Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

  <script type="text/babel">
    // Component code goes here

    // Render function to display element on UI
    ReactDOM.render(reactElement, document.getElementById("root"));
  </script>
  </body>
</html>

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.

const ReactElement = React.createElement('h1', null, 'Hello World')

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.

const ReactElement = props => React.createElement('h1', null, props.text)

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

ReactDOM.render(<ReactElement text="Dynamic Text"/>, document.getElementById("root"));

Final Code

<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- import Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

  <script type="text/babel">
    const ReactElement = (props) => React.createElement('h1', null, props.text);

    // Render function to display element on UI
    ReactDOM.render(<ReactElement text="Dynamic Text"/>, document.getElementById("root"));
  </script>
  </body>
</html>

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()


Tags

#react
Previous Article
How to lazy load iframes?

Related Posts

ReactJS
How to create a React component?
July 16, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Flutter
JavaScript
NextJS
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media