score:4

Accepted answer
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      total: 0,
      totalInput: '',
      show: false,
    };
  }

  add = () => {
    this.setState({
      total: this.state.totalInput
    })
  }

  showValues = () => {
    this.setState({
      show: true
    })
  }

  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render() {

    const inputs = [];

    for (let i = 1; i <= this.state.total; i++) {
      inputs.push(
        <input name={`input-${i}`} onChange={this.onChange} />
      )
    }
    return (
      <div>
        <input onChange={(e) => this.setState({ totalInput: e.target.value})} value={this.state.totalInput}  placeholder="Enter Number" />
        <button onClick={this.add}>Add</button>
        <br />
        {inputs}
         <br />
        <button onClick={this.showValues}>Show Inputs values</button>
        { this.state.show && 
          <pre>{JSON.stringify(this.state, null, 4)}</pre>
        }
      </div>
    );
  }
}

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

score:2

<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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Related Query

More Query from same tag