Programmatically adding more components in React

Question

I want to pass a template as props or as children and everytime I click 'add' i want to add one more item.

This is where I got so far:

App.js

<List template={
  (<Item>
      <span>Test</span>
   </Item>)
} />

List.js

...
add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
}

...

render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

But altough a new item is added, it has no children, so the 'Item' is there, but the 'span' is not. So the list is always empty.

Anyone knows how to do something like that?

The point is that the List mustn't be aware of what is passed to it. Whatever you pass, it should add.

not sure if it is the same problem. in that case SampleComponent is defined in the App component. What I want is the App component to now know about SampleComponent. It must receive it as props — Victor Ferreira
– Victor Ferreira, Commented Aug 18, 2018 at 3:57

Jasperan · Accepted Answer · 2023-05-24 02:23:47Z

2

Your List component only renders children. I basically do something like below

 class List extends Component{
     render(){
         return(
             <div>
                 {this.props.children}
             </div>
         )
    }
}

And you can call List and pass items or whatever like below

Your button is in the component where you call List and you pass onClick={this.add} to the button. Something like below

 this.state ={
      items: []
 }
 add = () => {
      const item =  <Item>
           <span>Test</span>
         </Item>
      this.setState(prevState => ({
           items: [...prevState.items, item]
      }));
  }
 <div>
      <List>
          {items}
      </List>
      <button onClick={this.add} />
   </div>

edited May 24, 2023 at 2:23

Jasperan

4,9457 gold badges33 silver badges69 bronze badges

answered Aug 18, 2018 at 3:55

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

4 Comments

Victor Ferreira Over a year ago

but after pressing 'add' it should add one new 'Item'. This logic must be inside the List component

Hemadri Dasari Over a year ago

I updated my answer please check. This will add new item whenever add button is clicked

Victor Ferreira Over a year ago

i just tried and what happened was what I said that the list becomes empty because the children of the child (in this case <span>) is not there.

Jan Ciołek Over a year ago

@VictorFerreira This is because of the <Item /> component.You must make sure that the <Item /> component renders its children which were passed as a prop childrend. const Item = props => (<div className="item-container">{props.children}</div>).@Hemadri Dasari has provided you an elegant solution for your problem.He did it with proper way how to update state based on the state.If you want to use the add logic in the <List /> component you can pass the logic through the props.I think that the best idea how to improve your code would be to show all of it here or on code review.Cheers!

Alex M · Accepted Answer · 2018-08-18 04:28:38Z

0

import React, { Component } from 'react';

class Item extends Component {

  render(){
    return (<p>This is an item
      {this.props.children}
    </p>)
  }

}

class List extends Component {

  constructor(props){
    super(props);
    this.state = {list: []};
  }

  add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = React.cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
    console.log(this.props.template);
  }

  render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

}

class App extends Component {
  render() {
    return (
      <List template={
        (<Item>
            <span>This is a Template</span>
         </Item>)
      } />
    );
  }
}

export default App;

edited Aug 18, 2018 at 4:28

answered Aug 18, 2018 at 4:24

Alex M

7304 silver badges20 bronze badges

2 Comments

Victor Ferreira Over a year ago

how is it different from what I Did?

Alex M Over a year ago

not sure - didn't see your Item component - are you having it render this.props.children?

Collectives™ on Stack Overflow

Programmatically adding more components in React

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related