在子组件上运行 function 并在父组件上调用 function

Question

I want to get the states from a country on change and pass handleChange to parent so on Child component i'm rendering the following:

<select  className="floating-select"
    id = "country"
    type ="text"
    onChange={handleChange('country')}>
    <option value="" selected>Please select a state</option>
    {
        this.state.countries.map(country => (
        <option value ={country}>{country}</option>
        ))
     }
</select>

I'm passing handleChange to parent which looks as follows

handleChange = input => e =>{
    this.setState({[input]:e.target.value} );
} 

my question is how can I run a function on the child component that gets data(the states that below to that country ) and still pass handleChange('country') to parent

Answer 1

You never pass anything up the component tree in react. It's one of the core principles of react. If you want to have access to something in both parent and child then define it in the parent and pass it down to the child. So define the state and the logic (so state.countries and handleChange) in the parent and pass both as props to the child component.

EDIT: Have to respond to your comment here, comments are too small.

You would need to know which country is currently selected, yes, but you save that info in the state as well and update it inside your handler. So your state would look something like

{
   countries: [...listOfAllCoiuntries], 
   country: selectedCountry or undefined, 
   ...otherStateProps
} 

And inside your handleChange function you set the country prop to whatever the value of the option was so your parent has access to which option was selected through this.state.country. If you pass this.state.country to your child component throught props then you can give that value to the component via the value prop.

<select 
   value={props.selectedCountry} 
   onChange={props.onChange("country")}
   ...otherProps
   >
   {props.countries.map(country => (
        <option value ={country}>{country}</option>
    ))}
</select>