/Javascript/React/Dynamic forms in react

Dynamic forms in react

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  createUI(){
     return this.state.values.map((el, i) => 
         <div key={i}>
    	    <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
    	    <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
         </div>          
     )
  }

  handleChange(i, event) {
     let values = [...this.state.values];
     values[i] = event.target.value;
     this.setState({ values });
  }
  
  addClick(){
    this.setState(prevState => ({ values: [...prevState.values, '']}))
  }
  
  removeClick(i){
     let values = [...this.state.values];
     values.splice(i,1);
     this.setState({ values });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.values.join(', '));
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          {this.createUI()}        
          <input type='button' value='add more' onClick={this.addClick.bind(this)}/>
          <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

Source: stackoverflow.com

Similar codes

0 vote165 views1 answer
Settimeout react native focus text input
Javascript React
1 vote136 views1 answer
No known class method for selector 'setScreenName:screenClass: react native
Javascript React
11 votes168 views3 answers
React app and tailwind
Javascript React
0 vote147 views1 answer
Did you mean "@babel/transform-react-jsx-source"
Javascript React
0 vote143 views1 answer
How to extract params from received link in react native firebase dynamiclink?
Javascript React
0 vote146 views2 answers
React Calender
Javascript React
23 votes140 views3 answers
Copy text to clipboard javascript react
Javascript React
0 vote131 views1 answer
Content uri react native fs
Javascript React
11 votes146 views2 answers
How to add react icons using npm
Javascript React
1 vote155 views1 answer
How to redirect in ionic react
Javascript React