CODEWITHSUNDEEP
javascriptreactjsreact-redux
learningMonk
learningMonk

Reputation: 1401

filter an array based on selected dropdown item -redux-react

I have a dropdownlist. Based on selected dropdown item i have to display currency. Here is the data structure : [{mruCode: "1700", country: "US", countryText: "United States", division: "WORLDWIDE_INDUSTRIAL",currency:"USD"}....]. I mapped this data to my select item. Now based on selected item (ex: division: "WorldWIDE_Industrial") i have to show currency(ex. "USD") in a label. If dropdown value change then onChange event will fire and display the corresponding currency.

I have created the action and reducer for this and filter the list based onChange action fire. I am not able to understand how to handle the change event. Please help on this.

component code: 

class LocationList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isLoading:false,
        };

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.loadData();
    }

    handleChange(mruCode){
      this.props.currencyLists(mruCode);
    }

    render(){
      const{location}=this.props;
      console.log(this.props.currList);
      const _labels = store.getLabels();
        return(<div>
            <span className="btnElement_spacing">You are viewing pricing for </span> 
  //here is the problem start i assume
             <select id="toggleLocationName">
                                  {location.map((item,index) =>
                   <option  key={index} onChange={()=>this.handleChange(item.mruCode)}> value={index}>{_labels[item.division]}</option> 
                    )}
          </select> 
          <span className="btnElement_spacing"> in </span>
                  {this.props.currList.map((item,index)=><label id="toggle-currency" key ={index}>{item.currency}</label>)}
            </div>
             );
    }
}

const mapStateToProps = state => {
    return {
      location: state.locationRed.location,
      currList: state.locationRed.currList
    }
  }

  const mapDispatchToProps = dispatch => {
    return {
      loadData:()=>{dispatch(loadData())},
      currencyLists:(mruCode)=>{dispatch(currencyLists(mruCode))}
      }
    }


  export default connect(mapStateToProps,mapDispatchToProps)(LocationList);

action code:

export const currencyLists = mruCode =>({
  type: CURRENCY_LIST,
  payload: mruCode
});

reducer code:

case 'CURRENCY_LIST':
        let newState = Object.assign({}, state)
        let newCurrList = newState.location.filter((el) => el.mruCode === action.mruCode)
        return Object.assign({}, newState, {
            currList: newCurrList
        });

i am trying to filter out the main list based on mruCode with action id for onChange and saved the result into a currList. mapped to display the currency. But i am failed. currList initially showing empty. onChange not triggered. How to make action fire to show the currency

Upvotes: 0

Views: 1436

Answers (1)

sk01
sk01

Reputation: 282

Onchange should be called on select tag(not on option tag). Below code should work.

<select id="toggleLocationName" onChange={this.handleChange}>
  {location.map((item, index) =>
    <option key={index} value={item.mruCode}>{_labels[item.division]}</option>
  )}
</select>

handleChange(e){
  this.props.currencyLists(e.target.value);
}

Upvotes: 1

Related Questions