ProductTable.js

import React, { useEffect, useState } from "react";

function ProductTable() {

  useEffect(() => {
    fetchData();
}

const fetchData = () => {
    axios
      .get("http://localhost:4000/api/products/product/viewAllProduct")
      .then((res) => {
        const getData = res.data.data;
        console.log(getData);
        setData(getData);
      });
  };

  return ( jsx..)

}
export default ProductTable;

**ProductModals.js **

``import React, { useEffect, useState } from "react";
function ProductModals(){
const handleSubmit=()=>{
.....
}
return (jsx..)
export default productModals;`

viewProduct.js

import React, { useEffect, useState } from "react";
import ProductTable from "../../Components/Tables/Product/ProductTable";
import ProductModals from "../../Components/Modals/Product/ProductModals";

function viewProduct(){

return(
<productModals/>
<productTable/>
)

}
export default viewProduct;

I need to to get fetchDatafunction from productTable.js component to productModal.js component. both components parent component is viewProduct.js. I tried many ways. but could not work. In productModal.js component has a function for form submit , when form submit done I need to call fetchData function, If anyone know the way please help me

CodePudding user response：

you can do this through react hooks. First, use fetchData into the parent component to pass data into both child components, If needed. Also Once submit the form call fetchData function through it and Update through setData props. So its parent state is also updated.

viewProduct.js

import React, { useEffect, useState } from "react";
import ProductTable from "../../Components/Tables/Product/ProductTable";
import ProductModals from "../../Components/Modals/Product/ProductModals";

  useEffect(() => {
    fetchData();
}

const fetchData = () => {
    axios
      .get("http://localhost:4000/api/products/product/viewAllProduct")
      .then((res) => {
        const getData = res.data.data;
        console.log(getData);
        setData(getData);
      });
  };

  return ( jsx..)

}

function viewProduct(){

return(
<productModals data={data} setData={setData}/>
<productTable data={data}/>
)

}
export default viewProduct;

productModel.js

Now, Submit your form and call the function recall inside and after getting response update through setData props.

     const fetchData = () => {
    axios
      .get("http://localhost:4000/api/products/product/viewAllProduct")
      .then((res) => {
        const getData = res.data.data;
        console.log(getData);
        setData(getData);
      });
  };

const recall=useCallback(()=>fetchData(),[])

CodePudding user response：

If the scenario is as simple as the example you have provided you can get away with lifting state up, but if you have many nested child components that needs to read/set these states you can use context, as suggested by Rajesh.

Lifting state up

To "lift state up" create a state in the parent component ViewProduct and pass along the relevant variables to the respective components via props:

function ViewProduct(){
  const [done, setDone] = useState(false);

  return(
    <productModals setDone={setDone} />
    <productTable done={done} />
  )

}

Use the passed in prop setDone in your handleSubmit function to update the state:

function ProductModals({setDone}){
  const handleSubmit=()=>{
    .....
    setDone(true);
  }

And in ProductTable make useEffect dependant on done to only fetch when it is true:

function ProductTable({done}) {

  useEffect(() => {
    if (!done) return;
    fetchData();
  }, [done]);

const fetchData = () => {
    axios
      .get(...

Reuse state

If you need to reuse the done state, you can reset it by passing setDone to ProductTable and set it back to false when fetching data:

function ProductTable({done, setDone}) {

  useEffect(() => {
    if (!done) return;
    fetchData();
    setDone(false);
  }, [done]);

const fetchData = () => {
    axios
      .get(...