CODEWITHSUNDEEP
reactjsrenderingrenderreact-bootstrapconditional-rendering
ChloeH
ChloeH

Reputation: 139

Render component number of times based on user input

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>
)

};

Upvotes: 1

Views: 5132

Answers (2)

Madura Pradeep
Madura Pradeep

Reputation: 2454

  1. Add a state to count number of boxes
  2. Update count when click on submit
  3. 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.

Upvotes: 1

Valentin
Valentin

Reputation: 2858

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>

Upvotes: 4

Related Questions