Understanding State

JavaScript
1

So im still trying to wrap my head around react…well state really. Like when to know a component needs state. The state is in one component, and passes it off as a prop to other components if needed. How do I know when to pass it off? Like lets say I have state on a grocery list, and the user wants to edit that list. The list component will have the state say

this.state = {
carrots: 10,
soup:2,
milk: 2,
bread:2
}

Well the user want to change carrots, because who wants 10 things of carrots? Now say there is a button that is pushed that brings up a modal change the carrot state. Would that be another component with the carrot state passed in? Or would that still be handled on the list component?

2

Well, if that modal has an input field where you can change the carrots quantity, then you’d have to have a way to pass the quantity back to the list component. You typically use props to help pass data back and forth between components.

I found this article here that was really good: https://codeburst.io/react-js-pass-data-from-components-8965d7892ca2

Hopefully this answers some of your questions better than I could :slight_smile:

3

I will give it a look for sure! I’m not in the setting to really sit down and read right now. I will have to look at the react lessons for like the 5th time as well lol. So that moral is obviously going to have onclick when the user hits save or whatever. So I would that onclick function back to the list component?

4

Or looking at some of the lessons. I could create a handle change method in the list component, and pass that to the lets call it EditList component? Then when the button is pushed it calls the passed in function which updates the state?

5

I’m sorry I’m just now seeing your replies…it’s been quite a busy month for me (I haven’t been on much lately)!

I think it really depends on how you want to approach it. I think you can do it either way successfully, neither is wrong. It sounds like you have a better grasp of state than you probably thought :slight_smile:

Digging a little deeper, you’ll often read about ‘stateful’ or ‘stateless’ components, and use props and functions to pass data back and forth. I’ll try to find some links for you on that subject…but I’ll give a quick explanation here:

‘Stateless’ - meaning you don’t set it to an initial state, and use props to give it a ‘state’.
‘Stateful’ - meaning you set your component to have an initial state.

I like to break it down for myself by breaking my project into several components and then decide which ones need to have state or be stateless. Usually, I’ll have one main component that handles the state and most of the app operations. This main component also renders all of my stateless components, passing all the data to them as props. I find this an easy way for me to break it down…I’m not saying its the perfect way to do it or anything, I’m still learning too.

Hopefully that helps and makes sense.

Here’s a couple links too for you to read when you have time:

1 Like