I am studying context hooks and everywhere I go, I see data being passed from parent to child components but I need it the other way around. Also, there are a few inputs on class based components but since i have no idea of class based components i find it difficult to understand it.
I have a DropDown component that has Dropdown component being imported from react-bootstrap.
const DropDown = (props) => {
const [selectedCountry,setSelectedCountry]=useState('World');
const [individualCountry,setIndividualCountry]=useState([]);
const onCountryClick=(event)=>{
setSelectedCountry(event);
//console.log(`country: ${event}`)
axios.get(`https://disease.sh/v3/covid-19/countries/${event}?strict=true`)
.then(response=>{
setIndividualCountry(response.data);
}).catch((error)=>{
console.log(error);
})
}
return (
<>
<Dropdown onSelect={onCountryClick}>
<Dropdown.Toggle variant="success" id="dropdown-basic">
{selectedCountry}
</Dropdown.Toggle>
<Dropdown.Menu className="toOverflow">
{
props.countriesPassed.map((country)=>{
return(
<Dropdown.Item eventKey={country.country}>{country.country}</Dropdown.Item>
)
})
}
</Dropdown.Menu>
</Dropdown>
<ContextIndividualCountry.Provider value={individualCountry}>
</ContextIndividualCountry.Provider>
{
console.log(ContextIndividualCountry)
}
</>
)
}
What I have done here is passed countries api from the parent component as props here to map and display all the countries that has covid in the dropdown. Now what I want to do is, I want to pass the data of the selected country from this component to parent component. For that I have created a state and I want to pass this individualCountry state to the parent component.
I want to achieve this using context hooks. Or is it not possible? I think I can do it passing function as the props and returning the updated value to the function but like I said i was wondering if i can do it using context hooks. Any help will be appreciated, thank you.....