Appending a New Html element inside existing div in react.js

Question

This is the initial html structure. There is container with id="container". I have rendered a Card component inside this container.

<div id="container">
   <div>
      <img src="https://avatars.githubusercontent.com/u/k8297" style="width: 75px;"><div>
      <div>Nishaant</div>
      <div>Age 22</div>
  </div>
</div>

Now i want another card to get concatenate to this container using react.js

I have tried

ReactDOM.render(<Card key={employee.name} name={employee.name} company={employee.company} url={employee.url}/>,document.getElementById('container'));

But this overwrites the existing data inside the container div. I want the new data to be appended to the existing data.

<div id="container">
       <div>
          <img src="https://avatars.githubusercontent.com/u/k8297" style="width: 75px;"><div>
          <div>User 1</div>
          <div>Age 22</div>
      </div>
      <div>
          <img src="https://avatars.githubusercontent.com/u/k8297" style="width: 75px;"><div>
          <div>User 2</div>
          <div>Age 26</div>
      </div>
    </div>

Like above...

Answer 1

You don't start calling ReactDOM.render function to append elements.

Best practice is to call ReactDOM.render once and let it handle all the handling of appending, changing etc.

This is how you could do it:

ReactDOM.render(<App />,document.getElementById('container'));

class App extends Component {
    render() {
        return (
            <div>
                {cardsData.map(card => {
                    return (<Card {...card} />);
                })}
            </div>
        )
    }
}

class Card extends Component {
    render() {
        return (
            <div>
                card html
            </div>
        )
    }
}

Answer 2

The ReactRender.DOM will render only one component. In your case, you could create a component called and this components renders actually 2 components:

const Cards = (props) => {
  return (
   <div>
    <Card Key... name... employee.../>
    <Card Key... name... employee... />
  </div>
 )
}

ReactDOM.render(<Cards />, document.getElementById('app'));

EDIT: If you want to render it on click event dynamically, you can create <Cards /> class, set its state to this.state = { cards: [] }

Create buttons with onClick={this.addCard}, create the addCard() function in your Card class that will update the state (cards array).

Finally, use map functon to go throiugh your state.cards and display the returned values in your JSX code.

You can't just "append" in your HTML, you need to go through state manipulation and rendering the JSX according to what the state looks like.

Answer 3

To do it the React way you would dynamically render your content, for this you need to store the data in state and update it when you need to append/remove the elements. After this you can render it using map like

class Employee extends React.Component {
   state = {
      employeeList: [{name: 'user-1', age: '22', company:'abc', url: "https://avatars.githubusercontent.com/u/k8297" }]
   }
   appendData = () => {
        const newData = {name: 's', age: '21', company:'xyz', url: "https://avatars.githubusercontent.com/u/k8297"}
        this.setState(prevState => ({employeeList: [...prevState.employeeList, newData]}))
   }
   render() {
       <div>
           {this.state.employeeList.map(employee => {
                return (
                    <Card key={employee.name} name={employee.name} company={employee.company} url={employee.url}/>
                )
           })}
           <button onClick={this.appendData}>Append</button>
       </div>
   }
}