I’m not entirely sure if this is possible, but this is our situation:
-The Parent component renders 2 children; Form component and List component.
-Parent component has no state.
-The Form component takes user input.
-Form component has no state.
-The List component renders the List.
-List component has the List in state.
We’re wondering if we can pass the value from the Form component into the List component, so that it adds the value to the List state, and rerenders the List component?
(This is our challenge atm. I’ve been saying it’s easier just to put state in the Parent component and pass it down to children…)
I think part of the problem is the function in Parent runs the setState. So I think there needs to be a second function in List that also runs setState, to re-render the List?
It is in React. Each component is a different file, but I can’t quite figure out how to make state work this way. I think I’m just going to move state to the Parent component, that seems like the easiest solution.
Good day , am keania, I dont use react but i use Vuejs. I tell you how its done in Vue maybe that might serve as a guide given they are both component based.
Passing data from parent down to child component in vue is done by using props and while passing data up to the parent from child component in vue is done by emitting events on the child and listening for that event on the parent passing in the value along with it. Let me know if this helped.
This sounds like a good place to use redux, or React context. With that, you’ll have a centralized place for all of your state, that would prevent the unnecessary passing of props from one or more components that don’t need it.
I ended up storing most of the state data in the Parent. One of the grandchildren dealt with quantity exclusively, so quantity is stored in the Grandchild state. Thanks everyone!