Transfering states in react

[lingo1357]

You mean this:

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

needs binding?
But I always thought its jsx statement and doesn’t need binding?
And in examples I didn’t see binding!!

[kevinSmith]

I’m not sure what JSX has to do with this, but no, this one does not need binding. Arrow functions just inherits the this. The other one, the standard function/method - standard JS functions create their own this so you have to bind the old this if you want to have access to it.

And in examples I didn’t see binding!!

The only time you need to bind this is if it is a standard function and you need access to the class’ this. If you look in the pen I linked, you will see an example.

[lingo1357]

In this
https://codepen.io/kevinsmithwebdev/pen/wjXEOx

I understand how parent affect on childs:

 <Child1 counter={this.state.counter} />
        <Child2 handleAction={this.handleAction} />   

But I can’t understand how children send their state to parent!
Do they send like parent?

[kevinSmith]

OK, in my haste I may have overwritten that pen. I’ll have to rebuild it.

In the mean time, yes passing a value from parent to child is easy, right? Soooo, if you have a function in the parent (like a class method, or whatever) that can change the state of the child, then you can pass that function into the child. Functions can be passed around in JS, just like any other value. That’s how a child affects the state of the parent - the parent passes it a callback function.

[lingo1357]

Did you delete the previous pen?
How can I see your previous example?

[Marmiz]

Hi @lingo1357 , I am gonna go a bit sideways so please bear with me.

At the core, React is “just” javascript. There’s no real magic as all classes and components get boiled down to regular functions.

So the same idea of lifting the state up can be expressed in plain JS as well.

Consider this example:

function a() {
  let count = 0;
  for(let i = 0; i < 10; i++) {
    count += 1
  }

  console.log(count)
}


function b() {
  let name = "b";
  let count = 0;
  for(let i = 0; i < 10; i++) {
    count += 1;
  }

  name = name.repeat(count);
  console.log(name)
}

I have two vary basic functions, that “count” up to 10. The first one will simply spit out the number, the second one will repeat the string.
So

a();
b();
// 10 
// "bbbbbbbbbb"

You can imagine the two functions as two react components: each one has its own state: the count variable and is doing its own thing.

Now Imagine that for whatever reason I want count to be shared across the two.
How would you solve it in plain Javascipt?
Simply have the function accept a parameter, wrap them into a common function that takes away the implementation and pass it:

// reworked a() - now it takes a param
// the counting loop is no more needed here
function a(count) {
  console.log(count)
}

// reworked b() - it takes a param.
// however "name" can still be used internally.
function b(count) {
  let name = "b";
  name = name.repeat(count);
  console.log(name)
}

// I wrap the two function in a common parent
function x() {
  // same implementation as before
  let count = 0;
  for(let i =0; i < 10; i++) {
    count += 1;
  }

  a(count);
  b(count);
}

Now by simply invoking x() I will get the same output as before:

10
bbbbbbbbbb

But they share a common param. So if I were to change count both will be in sync.

---

Nothing different in React.
You have a common parent that takes care of the internal implementation and passes it to its children.

Hope this clarify things up a bit