Populating new select options from data returned from previous select using React

Question

With React, render and populate new select upon onChange from the first.

I have successfully fetched the data upon onChange from the first select dropdown. Now how to get the updated state rendered on the same page.

constructor(props){
super(props);
this.state = {
partitions: [] 
}

handleSubmit(event) {
    const pk = event.target.value;
    fetch(`api/locations/${pk}`)
        .then(response => response.json())
        .then(body => this.setState({partitions: body}))
}
render() {
    return (
        <div>
            <div className={"form-group"}>
                <label>Locations</label>
                <select className={"form-control"}
                        name={"location"} value={"location"}
                        onChange={this.handleSubmit}>
                    <option value={""} key={""}>---------</option>
                    {Object.entries(this.props.data)
                       .map(location=>
                        <option value={location[1].id} 
                             key={key(location)}>
                            {location[1].location}
                        </option>
                    )}
                </select>
            </div>

How do I get that data to render underneath the first select dropdown?

What shape/example of data are you expecting back from your endpoint? — Neil
– Neil, Commented Jul 4, 2019 at 23:19
oh, it comes back as an array of objects. Similar to the way the first select options are populated. [{partition: partitionA}, {partition: partitionB}]. My question is how do I get the data to update/create a new select. Should I put a component tag <NewSelect /> that somehow gets triggered or rendered beneath the select already in the code? — Mitch
– Mitch, Commented Jul 4, 2019 at 23:31

Neil · Accepted Answer · 2019-07-04 23:52:24Z

1

All you need to do is create another select and wrap It around a condition which checks of the length is more than 0.

const { partitions } = this.state;
const displayPartitions = partitions.length > 0;

<>
  // Previous <select/>

  {displayPartitions && (
    <select>
      {partitions.map(item => (
        ...
      ))}
    </select>
  )}
</>

Personally I would have a component that handles the select, you could use it twice on a page and populate once with this.props.data then secondly with this.state.partitions.

If I read your response correctly when you make your selection you already have data so you just need to compose another select element.

answered Jul 4, 2019 at 23:52

Neil

9662 gold badges12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitch Over a year ago

I will give that a shot. However, keep in mind the user must select a location from the first one, which gets the data for the second.

Neil Over a year ago

Yeah I thought that was the case. displayPartitions should check if there is any data in your state first. But you won't have state until you make a selection anyway.

Collectives™ on Stack Overflow

Populating new select options from data returned from previous select using React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related