Render component number of times based on user input - reactjs

Question

I want to render a component the number of times that is based on user input. For example, I have a question that asks how many boxes do you want to create, with a textbox next to it where you can submit a number. Based on whatever that number is, I want to render the box on the screen that amount of times (given that I created a box in another file). How do I do this? Do I do this in my Box.js file (below) or my App.js file where my component is? I need a simple and detailed explanation because I am new to React.
My code using Bootstrap React:
const Box = (props) => {
return (
<div>
<Col xs={12} sm={8} md={8} lg={8} smOffset={2} mdOffset={2} lgOffset={2} >
<Panel bsClass="panel">
<Form horizontal>
<Row>
<Col componentClass={ControlLabel} lg={6}>
How many boxes do you want to create?
</Col>
<Col lg={4}>
<FormControl placeholder="Enter a number..." />
</Col>
<Col lg={2}>
<Button type="submit">
<FaArrowRight style={arrowStyle} />
</Button>
</Col>
</Row>
</Form>
</Panel>
</Col>
</div>
)
};

Answer 1

You'll probably need something else than a functional component here. You'll just need to store the input value in state and render based on that. A very simple example would be:
const Box = React.createClass({
getInitialState: function() {
return {
numItems: null
};
},
render: function() {
let items = [];
for (let i = 0; i < this.state.numItems; i++) {
items.push(<p key={i}>Item {i}</p>);
}
return <div>
<input
type="number"
value={this.state.numItems}
onChange={this.handleValueChange} />
{items}
</div>;
},
handleValueChange: function(e) {
this.setState({
numItems: e.target.value
})
}
});
ReactDOM.render(<Box />, document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Add a state to count number of boxes
Update count when click on submit
render box component based on state count (This will automatically happen once you set the state)
Box Component
class BoxComponent extends React.Component {
render() {
return (
<div>BOX</div>
);
}
}
Get user input component
class Box extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
numberOfBoxes:0
};
}
updateBoxes(e) {
e.preventDefault();
this.setState({numberOfBoxes:e.target.value});
}
getBoxes(){
var rows=[];
for(var i=0;i<this.state.numberOfBoxes;i++ ){
rows.push(<BoxComponent/>);
}
return rows;
}
render() {
return (
<div>
<Col xs={12} sm={8} md={8} lg={8} smOffset={2} mdOffset={2} lgOffset={2} >
<Panel bsClass="panel">
<Form horizontal >
<Row>
<Col lg={6}>
How many boxes do you want to create?
</Col>
<Col lg={4}>
<FormControl onChange={this.updateBoxes.bind(this)} placeholder="Enter a number..." />
</Col>
<Col lg={2}>
<Button type="submit">
Submit
</Button>
</Col>
</Row>
</Form>
{this.getBoxes()}
</Panel>
</Col>
</div>
);
}
}
Check following jsfiddle
https://jsfiddle.net/madura/yeu699on/1/
Note that in the sample I added to render boxes when change the count in the input (onchange event). Not to the form submit event. You can add this to form submit event with having reference (check react refs for more information) to your input.