CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-hooks
Umair_007
Umair_007

Reputation: 143

Passing data from parent to child using react.State but State reset to initial state

I am facing an issue while passing the state to the child component, so basically I am getting customer info from child1(Home) and saving in the parent state(App) and it works fine.

And then I am passing the updated state(basketItems) to child2(Basket). But when I click on the Basket button the basket page doesn't show any info in console.log(basketItems) inside the basket page and the chrome browser(console) looks refreshed too.

Any suggestion why it is happening and how can I optimize to pass the data to child2(basket) from main (APP).

update:2 i have tired to simulated the code issue in sand box with the link below, really appreciate for any advise about my code in codesandbox (to make it better) as this is the first time i have used it

codesandbox

Update:1 i have made a small clip on youtube just to understand the issue i am facing basketItems goes back to initial state

Main (APP)___|
             |_Child 1(Home)
             |_Child 2 (Basket)

Snippet from Parent main(App) component

function App() {

const [basketItems, setBasketItems] = useState([]);

const addBasketitems = (product, quantity) => {
    setBasketItems(prevItems => [...prevItems, { ...product, quantity }])
 }
console.log(basketItems) // here i can see the updated basketItems having customer data as expected [{...}]

return (
  <Router>
    <div className="App">
      <header className="header">
        <Nav userinfo={userData} userstatus={siginalready} />
      </header>

      <Switch>
        <Route path="/" exact render={(props) => (


          <Home {...props} userData={userData} userstatus={siginalready}
            addBasketitems={addBasketitems}
          />
        )}
        />
        <Route path="/basket" exact render={(props) =>
          (<Basket {...props} basketItems={basketItems} />
          )}
        />
      </Switch>
    </div>
  </Router>

Snippet from the child(basket)

function Basket({basketItems}) {

console.log(basketItems) // here i only get the [] and not the cusotmer data from parent component
  return (
  <div>
   {`${basketItems}`} // here output is blank
  </div>

    );
}

export default Basket;

Snippet from the child(Home)

... here once the button is pressed it will pass the userselected details to parent

....
<Button name={producNumber} value={quantities[productName]} variant="primary"
  onClick={() => {
    addBasketitems(eachproduct, quantities[productName])
  }}>
  Add to Basket
     </Button >

Upvotes: 0

Views: 103

Answers (1)

ErfanFi79
ErfanFi79

Reputation: 51

Your function works fine, the reason your output in addbasketItem does not change is the when using setState it takes some time to apply the changes and if you use code below you can see the result.

  useEffect(()=>{
    console.log('basket:',basketItems)
  },[basketItems])

Your Basket component only renders once so replace it with this code and see if it works:

function Basket({ basketItems }) {
  const [items, setItems] = useState([]);
  useEffect(() => {
    setItems(basketItems);
  }, [basketItems]);
  return <div>{`${items}`}</div>;
}

but for passing data between several components, I strongly suggest that you use provided it is much better.

Upvotes: 1

Related Questions