Creating extra react-select dropdowns based on value of the first dropdown

Question

I am creating a travel site.

I need a select box with options for 'number of children'. i.e. 1,2,3

If the user selects 1, then I need one extra react-select element to appear below for the user to select the age of the child (1,2,3,4,5,6,7,8,9,10,11,12)
If the user selects 2, then I need two extra react-select elements to appear below for the user to select the age of the children (1,2,3,4,5,6,7,8,9,10,11,12)
If the user selects 3, then I need three extra react-select elements to appear below for the user to select the age of the children (1,2,3,4,5,6,7,8,9,10,11,12)

Any idea how to do this? Thanks

Treycos · Accepted Answer · 2019-01-31 13:26:21Z

1

You can create an array from the value selected by the user and map it. You can then do the same thing to generate your 12 options.

In your JSX :

{new Array(valueSelected).fill().map((select, index) =>
    <ReactSelect key={index}>
        {new Array(12).fill().map((opt, i) => <option key={i}/>)}
    </ReactSelect>
}

(I do not know what the component's names are)

EDIT

Here is a fully working example using Array.from :

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            choices: 1
        }
    }

    choiceChanged = ev => {
        this.setState({ choices: ev.target.value })
    }

    render() {
        return (
            <div>
                <select onChange={this.choiceChanged}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                {Array.from({ length: this.state.choices }).map((select, index) =>
                    <select key={index}>
                        {Array.from({ length: 12}).map((opt, i) => <option key={i} value={i}>{i + 1}</option>)}
                    </select>
                )}
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id='root'>

edited Jan 31, 2019 at 13:26

answered Jan 31, 2019 at 8:25

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

2 Comments

John Eakin Over a year ago

Thanks, got this largely, any idea how to call defined functions for each select within the Array? I tried onChange={this.handleChildAgeChanged + index} but dont think you can do that

Treycos Over a year ago

Yeah, this is not how functions work, you should call it this way : onChange={this.handleChildAgeChanged(index)}. And for the declaration : handleChildAgeChanged = index => event => {

Farhan Ali · Accepted Answer · 2019-01-31 09:34:46Z

0

Please this this code, it's working for me

import React from 'react';
import Select from 'react-select';

const childoptions = [
    { value: '1', label: 'child1' },
    { value: '2', label: 'child2' },
    { value: '3', label: 'child3' }
];
const childAgeoptions = [
    { value: '1', label: 'age1' },
    { value: '2', label: 'age2' },
    { value: '3', label: 'age3' },
    { value: '4', label: 'age4' },
    { value: '5', label: 'age5' },
    { value: '6', label: 'age6' },
    { value: '7', label: 'age7' },
    { value: '8', label: 'age8' },
    { value: '9', label: 'age9' },
    { value: '10', label: 'age10' },
    { value: '11', label: 'age11' },
    { value: '12', label: 'age12' },
];

class App extends React.Component {
    state = {
        selectChild: null,
        showAgeOptions: false,
    }
    handleChild = (selectChild) => {
        this.setState({ 
            selectChild,
            showAgeOptions: true  
        });
    }
    handleChildAge = (selectedAgeOption) => {
        this.setState({ selectedAgeOption });
    }
    render() {
        const { selectChild } = this.state;
        const { selectChildAge } = this.state;

        return (
            <div>
                <Select
                    value={selectChild}
                    onChange={this.handleChild}
                    options={childoptions}
                />
                <Select
                value={selectChild}
                onChange={this.handleChildAge}
                options={childAgeoptions}
                />
            </div>
        );
    }
}

answered Jan 31, 2019 at 9:34

Farhan Ali

2303 silver badges14 bronze badges

6 Comments

John Eakin Over a year ago

If a user selects 1 or 2 or 3 children, then I need the same number of childAge select boxes to appear, otherwise they should be hidden if the value is 0.

Farhan Ali Over a year ago

what you want is if you select 1 then the other select option only show 1, if 2 then show 2 options only? not the whole list?

John Eakin Over a year ago

No, Initially there should be 1 select box for 'Number of Children'. this will have 4 values 0,1,2,3 and default at 0. No other select boxes should be visible at this stage, There are then 3 scenarios. Scenario one: if the user selects 1, then a new additional select box needs to become visible with options 1-12. Scenario 2: If the user selects 2 from the original select box, then there should be 2 new additional select boxes each with values 1-12. Scenario 3: If the user selects 3 from the original select box, then there should be 3 new additional select boxes each with values 1-12

John Eakin Over a year ago

Thanks, If a user initially selects numberOfChildren 3 from the parents, and then 3 child select elements are shows, and then they subsequently change 3 to 2, then the last child select element should disappear again.

Farhan Ali Over a year ago

and then they subsequently change 3 to 2, then the last child select element should disappear again. Elaborate it please

|

Collectives™ on Stack Overflow

Creating extra react-select dropdowns based on value of the first dropdown

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related