Populate Dropdown Select with Props React

Question

So I am trying to populate the dropdown with some info from another table using props. Currently have this. I had to do the loop backwards because earlier it was breaking,

import React, { Component, PropTypes } from 'react';
import {
  Button,
  ControlLabel,
  FormGroup,
  Form,
  FormControl
} from 'react-bootstrap';

class UserForm extends Component {

  constructor(props) {
    super(props);
  }

  createPosItems() {
    const posItems = [];
    console.log('heyyyy', this.props);
    for (let i = this.props.position.length; i > this.props.position.length; i--) {
      posItems.push(<option key={i} value={this.props.position.i}>{this.props.position.position_name}</option>);
    }
    return posItems;
  }

  createTeamItems() {
    const teamItems = [];
    console.log('whyyyyy', this.props);
    for (let i = this.props.team.length; i > this.props.team.length; i--) {
      teamItems.push(<option key={i} value={this.props.team.i}>{this.props.team.team_name}</option>);
    }
    return teamItems;
  }

  render() {
    return (
      <div className="row">
        <div className="col-lg-12">
          <Form>
            <FormGroup controlId="employeeFirstName">
              <ControlLabel>First Name</ControlLabel>
              <FormControl
                type="text"
                name="firstName"
                required=""
                value={this.props.user.firstName}
                onChange={this.props.onChange}
              />
            </FormGroup>
            <FormGroup controlId="empEmail">
              <ControlLabel>Email</ControlLabel>
              <FormControl
                type="email"
                name="email"
                required=""
                value={this.props.user.email}
                onChange={this.props.onChange}
              />
            </FormGroup>
            <FormGroup controlId="position">
              <ControlLabel>Job Position</ControlLabel>
              <FormControl
                componentClass="select"
              >
                <option value="">Select a Position</option>
                {this.createPosItems()}
              </FormControl>
            </FormGroup>
            <FormGroup controlId="Team">
              <ControlLabel>Team</ControlLabel>
              <FormControl
                componentClass="select"
              >
                <option value="">Select a Team</option>
                {this.createTeamItems()}
              </FormControl>
            </FormGroup>
            <FormGroup>
              <Button
                pullRight
                type="submit"
                className="btn btn-success"
                disabled={this.props.saving}
                onClick={this.props.onSave}
              >Save</Button>

              <Button
                pullRight
                type="submit"
                className="btn btn-danger pull-right"
                // onClick={this.props.onDelete}
              >Delete</Button>
            </FormGroup>
          </Form>
        </div>
      </div>
    );
  }
}

UserForm.propTypes = {
  user: React.PropTypes.object.isRequired,
  team: React.PropTypes.array.isRequired,
  position: React.PropTypes.array.isRequired,
  onSave: React.PropTypes.func.isRequired,
  onChange: React.PropTypes.func.isRequired,
  saving: React.PropTypes.bool
};

export default UserForm;

The forms is a child of another page. Every other field works, expect for the drop downs, the element shows up, but doesn't populate the drop down. Have tried using multiple people's examples, and still cannot get it to run. Thanks in advance!

vasekhlav · Accepted Answer · 2017-03-25 19:47:14Z

From what I see, your for loop is causing the problem. Let say that the this.props.team.length would be equal to 10. Then your loop would look like this:

for (let i = 10; i > 10; i--) { ... }

This code inside this for-loop would never be executed, because the condition is wrong. Basically it says, start with i = 10 and while i is bigger than 10 execute the code and then substract 1 from i.

But the problem is that 10 is not bigger than 10, and so the loop never gets executed. If I express this using the i variable, i can never be bigger than i.

This is the updated loop that should work:

for (let i = this.props.team.length - 1; i >= 0; i--) { ... }

Using this loop you render the options from the end (last index of the this.props.team array) to the index of 0.

If you wanted to start from the beginning, you would write this for-loop:

for (let i = 0; i < this.props.team.length; i++) { ... }

I'd also recommend you to use Array.prototype.map and to write only one function for populating the options, there is no need to repeat yourself. And using this approach, the array into which you store <option>s is not necessary. You could write such function like this:

populateOptions(options) {
  return options.map((option, index) => (
    <option key={index} value={option}>{option}</option>
  ));
}

Then you'd call this function in this fashion:

this.populateOptions(this.props.team)

or

this.populateOptions(this.props.position)

Here is the documentation for the Array.prototype.map function.

Poliakoff · Accepted Answer · 2017-08-23 16:36:05Z

1

You just create a variable from props like this:

const {organizations} = this.props;

And the use it to fill the dropdown in a render() method like this:

<DropdownButton title="Organization" className="m-b m-t" id="dropdown-organization">
                    {organizations.map((organization, i) =>
    <MenuItem key={i}>{organization.name}</MenuItem>)}
</DropdownButton>

The onClick handlers can be passed down via props the same way.

edited Aug 23, 2017 at 16:36

answered Mar 28, 2017 at 21:38

Poliakoff

1,7022 gold badges22 silver badges40 bronze badges

Collectives™ on Stack Overflow

Populate Dropdown Select with Props React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related