I have a React app & component structure looks like below

app.component.ts

<App>
<Products></Products>
</App>

product.component.ts

export const ProductComponent = () => {

const [category, setcategory] = useState("retail");
const [products, setProducts] = useState([]);   
const categorySelectHandler = (selectedCategory:string) => {
  setcategory(selectedCategory);
}

useEffect(() => {
 getProductsByCategory(category).then((products) => {
  setProducts(products);
   }
  });
  }, [category]);
  
return (
  <>
  <CategorySelector onCategorySelected={categorySelectHandler }></CategorySelector>
  { products.map((product) => {
  return ( 
   <div> 
    <b> {product.name} </b>
    <i> {product.price} </b>
   }
 </>}

categorySelector.component.ts

const CategorySelector: React.FC <CategorySelectorProps> = ({
onCategorySelected,
}) => {

const emptydata: Data[] = [];

const [category, setcategory] = useState("retail");

const [data, setdata] = useState(emptydata);

const categorySelectorHandler = (e: SyntheticEvent) => {
    e.preventDefault();
    const element = e.target as HTMLInputElement;
    setcategory(element.value);
    onCategorySelected(element.value);
};

return ( 
  <div>
    <select defaultValue = {category}  onChange = {categorySelectorHandler} >
     <option value = "retail" > Retail </option> 
     <option value = "electronics" > Electronics < /option> 
  </select>

    {
        data.map((_data: data) => {
            return ( <a href = "#" > {
                    _data.name
                } < /a> <
                /div>
            );
        })
    } 
    </div>
)};

export default CategorySelector;

Here onChange event of the dropdown in CategorySelector component (a child component) I get the selected value & pass it to the parent component i.e, ProductComponent. & this in turn triggers an ajax call to API which would return the products list based on the selected category.

Till this no issue

Now on the same event, I need to pass back the products list to the child component i.e., CategorySelector

Long Story Short

On an event in Child component, pass the data to Parent component (no issue here), however on the same event I need to pass data back to the child component from the parent component.