React pass parameter to parent component or call parent function on ES6
Now imaging that you don't want to just call a simple function, you want to pass in some parameters from child to parent and change some states to parent, so here is the only way you can do without any other plugins or so...
Lets use 0 counter and we want to increase each time pressed from Child button.
Lets add a constructor Parent componetnt and initialised a state, can be anything, we user "counter" here.
then I want to show the counter on the screen, so lets render this state on the container, remember to wrap the elements with something, react will not render same level jxs,
you should be able to see a 0 on screen with "I am child" and a toggle button, lets create a counter variable on Child too in constructor,
so when clicked on child toggle button, this counter should plus 1, lets create a method to add this counter, and pass it to Parent component:
which means clicking on the toggle button, I will need to trigger this method, so lets change the onClick to
Since we mentioned earlier ES6 method does not have any this bind to it, we will need to bind ourself manually again from Child constructor, lets add this binding in Child constructor, which will looks like this:
When you add up all scripts you should be able to see as my embed source below, try it out and enjoy.
Below is another demo if you want to pass the counter down to Child component: