0

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.

Kgn-web
  • 7,047
  • 24
  • 95
  • 161
  • Why do you need to store the category in both components' state? Why not leave it in the parent component and send it to the child as a prop? Same with the products. – samuei Jan 18 '22 at 14:49
  • 1
    3 options 1) break up your components and have a display component for products and pass via props 2) have the display of products in parent itself 3) if you must combine then you'll have to pass via props to the existing `categoryselector` the products and also pass what value was option was selected by `categoryselector` since your `categoryselector` is now a controlled component, which can be cumbersome. Go with 1 option – Sangeet Agarwal Jan 18 '22 at 14:53
  • here's one of my answers that might help about lifting state up. https://stackoverflow.com/questions/70397397/trigger-axios-data-fetch-on-button-click-in-another-component/70401516#70401516. This follows #1 approach in my comment above. Your specific example is crying out for the lift state up approach I think. – Sangeet Agarwal Jan 18 '22 at 15:01
  • @SangeetAgarwal, Could you please check & suggest. Thanks! _https://stackoverflow.com/questions/70851655/how-to-re-render-a-component-on-an-event-of-an-another-unrelated-component_ – Kgn-web Jan 25 '22 at 15:59

1 Answers1

0

You're already setting products in the parent component after the API call. Now all you would have to do is pass products to the child component as a prop. Easy peasy!

<CategorySelector onCategorySelected={categorySelectHandler } products={products}></CategorySelector>
Jevon Cochran
  • 1,565
  • 2
  • 12
  • 23
  • 1
    The problem with this approach is that the option selected will probably be lost since the `categoryselector` component is re-rendered. See my comments above. – Sangeet Agarwal Jan 18 '22 at 14:57
  • Yes I already tried with it, however It does re-render the CategorySelector component – Kgn-web Jan 18 '22 at 15:10