Sebastian

Nov 17, 2017

You don't. The state is limited to the component so you can't access it from the parent. A way to solve this would be to pass a function from parent into button and then the button can call that function with "isOn" as parameter and notifies the parent about a change. the parent can render the matching text. Important is here that the function is "bound" to the parent component.

If you create a sandbox on codesandbox.io or similar site then code suggestions could make things easier :)

Nov 17, 2017

Can you show me how to do that? I don't know what you mean.

Sebastian

Nov 17, 2017

I put up a codesandbox based on your code pieces and put in the changes. Have a look. The Hello Component is the parent of the button component.

codesandbox.io/s/j7p9m6qj55

Nov 17, 2017

Thanks. Now I have to understand what every piece of code is doing. I hope I'll get it soon on my own. ;)

Sebastian

Nov 17, 2017

You’re Welcome :). Next step could be to eleminiate the state in the button, because its currently redundant since the (especially initial) isOn Information could and should come also from the parent via props.

Nov 17, 2017

Sorry, but I don't get it what you wrote. Could you explain the code lines? Btw your name and username sounds German, so if you are, could you explain it in German? Would be easier to understand. ;)

Well, then in both languages :)

basicly I added a new Function to the parent component buttonChange. Then I passed this function as prop to the button component. The button now executes the function, passed in from the parent, with the current isOnstate as a parameter. That way the parent component gets called, which currently also stores the isOn value. So now, the information about isOnfrom the button is also known in the parent component, it can render a matching text.

Regarding binding: using the Arrow Function syntax, the function is automaticly bound the the class it's defined in. Alternatily you can define the function regularly and call .bind(this) in the constructor.

Im Prinzip hab ich der Eltern-Komponente eine Funktion hinzugefügt buttonChange . Diese wird also parameter dem Button übergeben. Dieser kann nun die Funktion der Elternkomponente aufrufen und den aktuellen isOn Status übergeben, wenn dieser im Button sich ändert. Damit weiß nun auch die Elternkomponente über den isOnStatus bescheid und kann entsprechend den Text rendern.

Bezüglich des bindings: Durch die Definition als Pfeil-Funktion (arrow-function) ist die Methode automatisch an die Elternklasse gebunden. Alternativ kann man diese als normale funktion definitieren und im Konstrukter .bind(this)ausführen.

Nov 18, 2017

Thank you! Dankeschön :)

Search Hashnode