1

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.....

0 Answers0