How To Render Dynamic Data In React Js (for beginners)

When building a web app in react using JSX we find out that since it is a web app that we are trying to develop and not a website we try as much as possible to relent from using static data input and use the dynamic data input instead, this is because the user is the one is normally in charge of filling the data input.
So in react when trying to render dynamic data input into the Dom using JSX we can make use of the following syntax;
Create an object that would contain the dynamic data inputs example:

const example = {
example1: ‘the following string’,
example2:   20   (‘the following number’),
example3: [‘the following array’]
}

Now we have created the dynamic input object we just have to connect it to the input-fields where we want them.

const htmlPlacement =
 (
  <h1>{example.example1}</h1>
  <p>{example.example2}</p>
  <p>{example.example3}</p>
);

Now we have connected the dynamic data with the data input field using “{}”, now those curly brackets allow us to input in js syntax into our jsx.
and what is left is to render it into the dom as follows.
NB: Make sure that there is a root app that is being placed in an ID of the HTML.

ReactDOM.render(htmlPlacement);

and that is it you can now render dynamic data into the dom