score:4

Accepted answer

loop through the number entered by the user.

const inputs = [];

for (let i = 1; i <= this.state.total; i++) {
  inputs.push(
    <input name={`input-${i}`} onchange={this.onchange} />
  )
}

render inputs

render() {
  return (
   ....
    {inputs}
  ...
  )
}


<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

here is the solution. other refactor may be required.

working link https://jsfiddle.net/ogmv3wpu/1/

class hello extends react.component {
 constructor() {
  super();
  this.state= {
   inputsize: 0
  }
 }
 
 handleonchange(value){
 this.setstate({
 inputsize: value.target.value
 });
 }
 
 renderinputs(value){
  const inputs=[];
  for(let i=0; i<value; i++){
    inputs.push(<div key={i}><input  value={name}}type="text" name="quantity"/></div>)
  }
  return inputs;
 }
 
  render() {
  console.log(this.state.inputsize);
    return (<div>
    <input type="number" name="quantity" min="0" max="99999" onchange={(value)=>this.handleonchange(value)}/>
    <div>
    {this.renderinputs(this.state.inputsize)}
    </div>
    </div>
    )
  }
}

reactdom.render(
  <hello name="world" />,
  document.getelementbyid('container')
);
<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