Maintain state of react component at each render

Question

I have a "Add" button that renders the same component on each click. The parent state is passed as props to this component which contains fields like email, name etc. Add button can be pressed at max 9 times which means I will generate 9 child components dynamically in a form using "Add" button. I want to maintain the state of all these 9 child components

input type="button" name="numOwners" value="Add"/>

BasicDetails {...this.state}/>

At each click of Add component BasicDetails is rendered

Is it possible using react state? I am new to React and any help would be appreciated.

E1-XP E1-XP · Accepted Answer · 2019-06-14T18:32:42

You can simply use array or object with values of currently existing childrens in parent state and then map these values to render created components. After every 'add' click append item to parent state, so newly created child will appear.

  class Parent extends Component {
     state={ items : [] }

   render() {
     return <>
        {this.state.items.map(data => <Child {...data}/>)}
     <\>
     }
  }

Maintain state of react component at each render

1 Answers