CODEWITHSUNDEEP
reactjsredux
Chakravarty A
Chakravarty A

Reputation: 84

React+Redux: How to add dropdownfield dynamically

My task says when users select children count other than 0 (which is a dropdown), then we have to check the boolean condition first based on which display the option to select ages for no of children selected. i.e if children count is 3, and RequestAge boolean is true, then I have to show 3 dropdowns below with age count from 0 to 12. So I called a function on "OnChange" event as below but even 1 dropdown is also not displaying
And also default value of the dropdown is 'Select Age'. Can you help me.

if (RequestAge)
{
    if (childrenCount > 0)
    {
        var AgeOptions = ['Select Age', '1','2','3'....'12'];
        return (
                <label>Enter Age of Children'</label>
                <select name='selectAge' id='selectAge'>
                    <option key='Select Age' value='Select Age'>this.props.AgeOptions}                
</option>
                        </select>
                )
    }
}

Upvotes: 0

Views: 1977

Answers (1)

Dhaval Patel
Dhaval Patel

Reputation: 7601

You can use below mentioned code 

render:function()
  {
     var AgeOptions = ['1','2','3'];

    return(
      <div>
      Select Age:
       <select>
       <option value="0" selected>Select Age</option>
        {AgeOptions.map(function(age){
          return(
             <option value={age} >{age}</option>
            )
        })}
       </select>
      </div>

      )
  }

Working Sample Demo

Upvotes: 1

Related Questions