Vfrdtyky

I made a component containing two dropdown lists. The options in the second dropdown menu is supposed to be filtered depending on the selected option from the first dropdown menu.

Now, I want to map a filtered array that is stored in a const similary to the way i map options1:

render() {



const options1 = [

   {value: 'one', label: 'One'},

   {value: 'two', label: 'Two'}

];







const options2 = [

   {value: 'one-a', label: 'One A', link: 'one'},

   {value: 'one-b', label: 'One B', link: 'one'},

   {value: 'two-a', label: 'Two A', link: 'two'},

   {value: 'two-b', label: 'Two B', link: 'two'}

];



const filteredOptions = options2.filter(o => o.link === this.state.selectedOption.value);



return (

<div style={style}>

   <div>

      <label>Select one</label>

      <select 

         value={this.state.selectedOption.value} 

         onChange={this.handleChange1} 

      >

         {options1.map(tag => <option>{tag.value}</option>)}

      </select>



   </div>

   <div>

      <label>Then the other</label>

      <select

         value={this.state.selectedOption2.value}

         onChange={this.handleChange2}

      >

         {filteredOptions.map(tag => <option>{tag.value}</option>)}

      </select>



   </div>

</div>

)

}

The first mapping of options1 works just fine. However, my select tag gets rendered empty for the mapping of filteredOptions.

I have no idea why it won't work. Anyone happen to have an idea?

Full code: https://www.codepile.net/pile/evNqergA

Here is a working example for what you're trying to do.

import React, { Component } from "react";



const options1 = [

  { value: "one", label: "One" },

  { value: "two", label: "Two" }

];



const options2 = [

  { value: "one-a", label: "One A", link: "one" },

  { value: "one-b", label: "One B", link: "one" },

  { value: "two-a", label: "Two A", link: "two" },

  { value: "two-b", label: "Two B", link: "two" }

];



export default class SelectsComponent extends Component {

  handleChange1 = e => {

    console.log(e);

    this.setState({

      selectedOption: { value: e.target.value }

    });

  };



  handleChange2 = e => {

    this.setState({

      selectedOption2: { value: e.target.value }

    });

  };



  constructor(props) {

    super(props);

    this.state = {

      selectedOption: { value: "one" },

      selectedOption2: { value: "one-a" }

    };

  }



  render() {

    const filteredOptions = options2.filter(

      o => o.link === this.state.selectedOption.value

    );



    return (

      <div>

        <div>

          <label>Select one</label>

          <select

            value={this.state.selectedOption.value}

            onChange={this.handleChange1}

          >

            {options1.map(tag => (

              <option>{tag.value}</option>

            ))}

          </select>

        </div>

        <div>

          <label>Then the other</label>

          <select

            value={this.state.selectedOption2.value}

            onChange={this.handleChange2}

          >

            {filteredOptions.map(tag => (

              <option>{tag.value}</option>

            ))}

          </select>

        </div>

      </div>

    );

  }

}

In your scenario filteredOptions would be an empty Array.

The check for o.link === this.state.selectedOption.value is doing something wrong.

Check the value of this.state.selectedOption.value, this is not set correctly.

The best way to do this wouldn't be inside of the render method.

1) move your arrays into state or other instance members
2) make sure to only trigger the sorting once

this.setState(lastState => ({

  ...lastState,

  options2: lastState.options2.filter(yourFilterFn)

}))

3) map the filtered array into JSX inside of your render method

Side-note: this uses immutable setState (which I gather is important given you create a new filtered array from the options2 in your example). If you want to follow an even more functional pattern, you can do the filtering inside of your render method (although I don't recommend it). If you decided to filter inside of your render method, consider using a memoization technique from React 16.7 (which is currently in Alpha).