Passing data from child component - reactjs

Question

const Location = (props) => {
const [province, setProvince] = useState(null);
const [discrict, setDistrict] = useState(null);
const [discrictList, setdiscrictList] = useState([]);
const handleProvinceChange = (obj, e) => {
setProvince(obj);
setdiscrictList(obj.ilce);
setDistrict(null);
};
const handleDistrictChange = (obj) => {
setDistrict(obj);
};
return (
<div style={{ width: 400, marginBottom: 20 }}>
<Select
placeholder="Şehri Seçiniz"
value={province}
options={il}
onChange={handleProvinceChange}
getOptionLabel={x => x.il}
getOptionValue={x => x.il}
/>
<Select
placeholder="İlçeyi Seçiniz"
value={discrict}
options={discrictList}
onChange={handleDistrictChange}
getOptionLabel={x => x.ilce}
getOptionValue={x => x.il}
/>
</div>
)
}
export default Location;
I wanna send discrict data from this code to this component to use a function from here. Location component is rendered in List Component,List Component is in Content.
class Content extends React.Component {
state = {
locations: [],
allLocations: [],
query: "",
};
componentDidMount() {
console.log("DATA");
/*I wanna pass this data to use this function*/ LocationsAPI.getLocations().then(resp =>
this.setState({ locations: resp, allLocations: resp })
);
}
render() {
console.log(this.state.locations);
return (
<div className="content">
<List/>
</div>
);
}
}
export default Content;
I've searched it too much. But it always gives errors. How can i pass discrict data for using Content component?

Answer 1

My understanding is that you want to pass district data from the Location component to it's ancestor the Content Component. Furthermore, you want the function that uses that data to run on Component Mount. I think one way of doing this would be to simply define a method inside of the Content Component that accepts the data as an argument. Then you can just pass that function down to the Location Component using the List Component. Since you have access to the function in the Location component, you can call it using your data. Since ComponentDidMount runs after all children have rendered, we can simply use a useEffect hook in the Location Component, and call our function just based on that hook.
It might look something like this:
class Content extends React.Component {
state = {
locations: [],
allLocations: [],
query: "",
};
LocationFunction(data){
console.log("DATA");
/*I wanna pass this data to use this function*/
LocationsAPI.getLocations().then(resp =>
this.setState({ locations: resp, allLocations: resp }));
}
render() {
console.log(this.state.locations);
return (
<div className="content">
<List LocationFunction={LocationFunction}/>
</div>
);
}
}
export default Content;
const Location = (props) => {
const [province, setProvince] = useState(null);
const [discrict, setDistrict] = useState(null);
const [discrictList, setdiscrictList] = useState([]);
useEffect(()=>{
props.LocationFunction(data);
},[district]);
const handleProvinceChange = (obj, e) => {
setProvince(obj);
setdiscrictList(obj.ilce);
setDistrict(null);
};
const handleDistrictChange = (obj) => {
setDistrict(obj);
};
return (
<div style={{ width: 400, marginBottom: 20 }}>
<Select
placeholder="Şehri Seçiniz"
value={province}
options={il}
onChange={handleProvinceChange}
getOptionLabel={x => x.il}
getOptionValue={x => x.il}
/>
<Select
placeholder="İlçeyi Seçiniz"
value={discrict}
options={discrictList}
onChange={handleDistrictChange}
getOptionLabel={x => x.ilce}
getOptionValue={x => x.il}
/>
</div>
)
}
export default Location;