Update select react from another select option

Question

I'm trying to update my city select from the selected state, but the city does not update when I change the state:

Here is the part of my render code:

<div>
     <label for="state">state:</label>
            <SelectInput items="RO-DF-RS-SP-RJ-MG-PR" onChange={this.handleChange} name="state"/>
                </div>
                {!!this.state.stt && 
                    (
                        <div>
                            <label for="city">city:</label>
                            <SelectInput url="/static/json/" filename={this.state.stt} onChange={this.props.onChange} name="city"/>
                        </div>
                    ) 
                }
<div>

this.props.onChange is just a handler to get the value of the input to save the data at database

And the code:

handleChange(event){
    if(event.target.name == "state"){
        this.setState({
            stt: event.target.value
        });
    }
    if(this.props.onChange) {
        this.props.onChange(event);
    }
}

sets the correct state (this.state.stt)

Here is my SelectInput:

class SelectInput extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            select: "",
            items: [],
            filename: this.props.filename
        }
        this.handleChange = this.handleChange.bind(this)


    }

    componentDidMount(){
        if(this.props.filename){
            console.log(this.props.filename);
        }

        if(this.props.items){
            this.setState({
                items: this.props.items.split("-")
            })
        }
        else if(this.props.url && this.props.filename){
            $.ajax({
                type: 'GET',
                url: `${this.props.url}${this.props.filename}.json`,
                headers: { 'Authorization': "Token " + localStorage.token },
                success: (result) => {
                    this.setState({
                        items: result.child
                    })
                },
                error: function (cb) { console.log(cb) }
            });
        }
    }

    handleChange(event){
        this.setState({
            select: event.target.value
        });
        if(this.props.onChange) {
            this.props.onChange(event)
        }
    }

    render(){
        return (
            <select name={this.props.name} value={this.state.select} onChange={this.handleChange}>
                <option value=""></option>
                {this.state.items && this.state.items.map(item =>
                    <option value={item}>{item}</option>
                )}

            </select>
        )
    }


}

export default SelectInput

Any idea to solve my problem?

Answer 1

Since you are setting filename dynamically you need to implement componentWillReceiveProps that will make ajax request to load new file.

componentWillReceiveProps({ filename }) {
  if(filename !== this.props.filename) {
    this.loadItems(filename)
  }
}

loadItems(filename) {
    $.ajax({
      type: 'GET',
      url: `${this.props.url}${filename}.json`,
      headers: {
        'Authorization': "Token " + localStorage.token
      },
      success: (result) => {
        this.setState({
          items: result.child
        })
      },
      error: function(cb) {
        console.log(cb)
      }
    });
}