React - how to add to react DOM?

Question

newbie

I can create an element but how do I then add to that element ?

When I try

  <body>
    React....
    <div id="main_insert">
      <span>
      </span>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>    <script>
      let dish = React.createElement("h1", {id: 'top'}, "Baked Salmon");
      let ingredients = React.createElement("ul", {id: 'mainList'},
        React.createElement("li", null, "eggs"),
        React.createElement("li", null, "ham"),
        React.createElement("li", null, "spam")
      );

      ReactDOM.render(dish, document.getElementById('main_insert'));
      ReactDOM.render(ingredients,  document.getElementById('top'));
      // react and js code here
    </script>
  </body>

I get the ingredients but not the dish

My H1 does exist, but content is gone

Looks like the UL is there and it has something in it. Have you tried unfolding that node? — user1726343
– user1726343, Commented Jul 18, 2017 at 13:23
yeah jsx but I am learning without it first for a bit of base knowledge — Michael Durrant
– Michael Durrant, Commented Jul 18, 2017 at 13:25
I believe this has to do with how ReactDOM.render works internally. If we comment the second render statement, h1 tag data gets displayed properly. Now, since the list is getting displayed inside this h1 tag, it does not take into account the data that was initially present within the h1. Same can be verified by having some content within the main_insert div and then trying to render only the h1. In this case also content within the main_insert div disappears. — Saurabh Gour
– Saurabh Gour, Commented Jul 18, 2017 at 16:33

Piotr Czarnecki · Accepted Answer · 2017-07-18 14:13:07Z

1

Please take a look a this reworked example - should work:

<body>
  React....
  <div id="main_insert">
    <span>
    </span>
  </div>
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>    
  <script>

    let ingredients = React.createElement("ul", {id: 'mainList'},
      React.createElement("li", null, "eggs"),
      React.createElement("li", null, "ham"),
      React.createElement("li", null, "spam"));

    let dish = React.createElement("h1", {id: 'top'},
     "Baked Salmon",
     ingredients);

    ReactDOM.render(dish, document.getElementById('main_insert'));
    // react and js code here

  </script>
</body>

answered Jul 18, 2017 at 14:13

Piotr Czarnecki

1,6983 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh Gour · Accepted Answer · 2017-07-18 18:17:13Z

Note : This is more of an analysis of the issue, @Piotr has already provided a workaround.

From Reacts Website

ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called

Lets look at the sequence of actions now:

1) No render methods of the code are called ( both commented ):

Here, we can see that the child span tag is getting displayed.

2) Now, we call the method ReactDOM.render(dish, document.getElementById('main_insert')); This should insert the h1 element while replacing the existing child elements.

As expected, the child span tag gets replaced with the h1 that we created.

3) Similarly, now when we call ReactDOM.render(ingredients, document.getElementById('top')); , our new container node is the h1 tag. Thus any content within h1 gets replaced by the new element that we render within it like so :

Collectives™ on Stack Overflow

React - how to add to react DOM?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related