Transfering states in react

Hello

Can I share or transfer one component state or variable to another component in react?

regards,

Yes, put the state in a parent component of both then it is available to both of them.

Yes, there are standard practices for passing data around. I made a pen to give an example.

That can get a bit onerous with a big app, which is where things like context and redux can come in handy.

Kevin in your example, in child 2 there is a method:

handleButton(action) {
    this.props.handleAction(action)
  }

Can you please explain about it?
I’m really confused!

thanks,

In the JSX for Parent, I have:

<Child2 handleAction={this.handleAction} /> 

Here, (right side of the equation) I am passing in this.handleAction , a class method in Parent. It is being passed in (on the left side) in the prop “handleAction”. I gave the prop the same name, but I didn’t have to.

So, that prop will “magically” show up in Child2 as a prop.

Then, in the class method of Child2 called handleButton, I call that function.

Is that clear?

Yes. I’m trying to understand it. But really confused! :thinking:

Yes, coding is confusing. And when you first start doing React, that is a whole other level of confusion.

What specifically is confusing?

This is not my first project. The lifting up is confusing!
Can you please write comment for your code?

thanks,

It might be a little simpler if you ask a specific question.

Yes, lifting up state is weird at first. It can also get very messy in large projects (the reason we have things like context or redux). Just keep at it. Maybe look up some tutorials. But ultimately this is just an application of basic React: If two components need the same state, it needs to be maintained in a common ancestor. You already know (I assume) how to pass values to children. The weird part (for many) is passing the callback functions to manipulate the state of the ancestor. That’s why I wrote that pen. But it seems a little outdated - maybe I’ll try to tighten it up a bit, but I don’t know when I’d have the time.

In the mean time, make a fork of that pen and mess with it. See if you can understand what it is doing.

2 Likes

I took a quick look and I feel like there are a lot of comments.

But yeah, I remember how confusing React was when I started. Do you have a specific line of code that is confusing? Or a specific concept?

If you want to make it more confusing use context api or redux so siblings can share state. Although context api is easier than redux.

Parent state → children component will do

That’s exactly the same thing though. You don’t share state between siblings, you lift state up to a parent component. The difference is that you don’t access it via props.

I just keep reading and reading from yesterday. :neutral_face:

Again, what specifically is confusing you?

All the code! I think can’t understand the concept behind the code! Also, I’m reading and trying to understand!

Can you please inform me what kind of statement is this?

handleAction = action => {
}

thanks,

Sure, that is a specific question. I am just defining a method here. There are two ways to define a class method. The standard way is to define it as a standard function:

  doSomething1() {
    alert('hey 1')
  }

That may be what you’re used to, what is usually taught in React. The “newer” way is to define it as an arrow function and store it in a class property:

  doSomething2 = () => {
    alert('hey 2')
  }

By “newer” I don’t necessarily mean better. I tend to like the arrow function method because arrow functions don’t create their own “this” so I don’t have to worry about binding “this”. But both work. Here is a pen where you can mess around with it. Notice that I have to bind “this” for the first method but not the second.

Said another way, I could have also done:

  handleAction(action) {
    // ...
  }

and it would have done the same thing, except that I’d have to bind “this”, for example by putting this.handleAction = this.handleAction.bind(this) in the constructor.

You mean they are the same as each other:

handleAction = action => {
}
doSomething2 = () => {
    alert('hey 2')
  }

I am saying that:

handleAction = action => {
}

and

handleAction(action) {
}

Would be essentially the same, as long as you remember to bind “this” for the second one.

The equivalent of:

doSomething2 = () => {
  alert('hey 2')
}

would be

doSomething2() {
  alert('hey 2')
}

But again, since it is a standard function/method, you have to bind “this”. Although, in this case since this is not needed inside the function, there is actually no need to bind it.

Mess around with this pen a little and see if it makes more sense.