React Component - reload data within multiple times

Question

Imagine a simple React component with <select> element that allows to choose a city based on country. For example

<MyCitySelectComponent
  country={ 'France' }
  city={ 'Paris' }
  onChange={ someFunction }
/>

When mounted, it should load list of available Cities (based on Country) and render <select>.
When city property is changed - it should modify <select> input value and trigger onChange event.
When country property is changed (from parent component) - it should reload list of available cities from a remote server and trigger the same onChange event.

I managed to implement first two, here is simplified code:

class MyCitySelectComponent extends Component {
    constructor(props) {
        super(...props);

        this.state = {
            cities: null,
            city: props.city,
            country: props.country
        };
    }

    onCityChange( e ) {
        this.setState({
            city: e.target.value
        });

        this.props.onChange( e.target.value );
    }

    loadCities() {
        fetch({
            path: '/get/cities?country=' + this.state.country,
        }).then( cities => {
            this.setState({
                cities: cities
            });
        });
    }

    componentDidMount() {
        this.loadCities();
    }

    render() {
        if ( !this.state.cities ) {
            // not loaded yet
            return null;
        }

        return (
            <select>
                { this.state.cities.map( ( name, index ) =>
                    <option
                        value={ name }
                        onChange={ this.onCityChange }
                        selected={ name === this.state.city }
                    />
                ) }
            </select>
        )
    }
}

But I'm having trouble reloading cities when country is changed dynamically from parent component. I tried using shouldComponentUpdate, but all I get is infinite loops.

Is there any pattern for such type of component?

Thank you.

This might be what you want getDerivedStateFromProps

Abhishek Kumawat
– Abhishek Kumawat

2018-10-23 14:58:31 +00:00
Commented Oct 23, 2018 at 14:58 — Abhishek Kumawat
– Abhishek Kumawat, Commented Oct 23, 2018 at 14:58

lipp · Accepted Answer · 2018-10-23 14:59:08Z

1

Fetching new data based on prop changes should be handled in componentDidUpdate or getDerivedStateFromProps. Have a look at the docs for an example: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change

Note that componentWillReceiveProps is deprecated!

answered Oct 23, 2018 at 14:59

lipp

5,9962 gold badges23 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

React Component - reload data within multiple times

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related