React, render component in a dynamically added element

Question

On the initial page load of the page I have a list of users

<div class="user"></div>
<div class="user"></div>
<div class="user"></div>

I replace the content with React components:

const buildElement = React.createElement;
let domElements = document.getElementsByClassName('user');

for(let domContainer of domElements) {
  ReactDOM.render(buildElement(UserDetails, {
    ...
  }), domContainer);
}

All works fine so far. However, if I dynamically load new users, they are not picked up by React. For example, if I do

$("#users").append("<div class='user'></div>")

How could I render the React component inside the dynamically added user div :? Thanks!

EDIT: With the current setup of the application, it is not possible to simply render the users using React...

Is it possible to use custom elements like <user/> instead of div? developer.mozilla.org/en-US/docs/Web/API/Window/customElements — Nadir Laskar
– Nadir Laskar, Commented Oct 24, 2019 at 9:24

Nadir Laskar · Accepted Answer · 2019-10-24 09:54:52Z

If you can use customElements instead of div, you can control how the element is rendered by browser every time new custom defined tag is added to dom.

Example:

customElements.define('user-tag', class extends HTMLElement {
    constructor() {
      super();
      const buildElement = React.createElement;
      let shadowRoot = this.attachShadow({mode: 'open'});
      ReactDOM.render(buildElement(UserDetails, {
        ...
      }), shadowRoot);
    }
  }
});

Now you can append like $("#users").append("<user-tag/>")

Below is a snippet showing users added to a div on click of the button dynamically.

// React Component
const UserDetails = () => "I am a user  ";

// Define custom element
customElements.define('user-tag', class extends HTMLElement {
  constructor() {
    super();
    const buildElement = React.createElement;
    // Create shadow root 
    let shadowRoot = this.attachShadow({
      mode: 'open'
    });
    // Render react component
    ReactDOM.render(buildElement(UserDetails, {}), shadowRoot);
  }
});

// Add new user tag dynamically
function addUser() {
  $("#users").append('<user-tag/>')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="users"></div>
<button onClick="addUser()">Add user</button>

Harsh Makadia · Accepted Answer · 2019-10-24 09:15:02Z

0

Check the below running snippet. I have taken array that holds user details and when clicked on add new user you only need to append the element to array and thus it will render all the elements dynamically.

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      users: [{
       "name" : "Max",
       "id" : 1
    }, {
       "name" : "Mad",
       "id" : 2
    }, {
       "name" : "john",
       "id" : 3
    }]
  }
  }
  
  adduser = ()  => {
    const users = this.state.users.slice(0);
    users.push({
    name: "New Users",
    key: Date.now().toString()
    });
    this.setState({users});
  }

  render() {
    const listItems = this.state.users.map((user) =>
        <li key={user.key}>{user.name}</li> 
    );
    return (
    <div>
      <div className="container">{listItems}</div>
      <button onClick={() => this.adduser()}> Add new user </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

answered Oct 24, 2019 at 9:15

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

1 Comment

Kristiyan Tsvetanov Over a year ago

Thanks for that... However, I mentioned I cannot directly render the users. I said that because the user can show up anywhere in the application and at most of the occasions it is dynamic(The app is half jQuery, half React). Thanks again!

Collectives™ on Stack Overflow

React, render component in a dynamically added element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related