Danny Dyer Danny Dyer - 1 year ago 97
Javascript Question

REACT - Retrieve state of the parent and pass to child

I am learning React and have got to a point where I am a bit stuck. Here is the Parent component of my add with the attribute im using to populate its state with a JSON object:

var App = React.createClass({
getInitialState: function() {
return {
loadClothingItems: function(){

In my render function for App I am passing down the apps props for loadClothingItems like so:

<OtherOptions loadClothingItems={this.loadClothingItems} />

Here is the child component (OtherOptions). There is an a-tag which onClick populates the App state. I then need to get the state that has been added to App back down to OtherOptions in order to generate all my object key properties into li items within the ul:

var OtherOptions = React.createClass({
return (
<div className="other-options-inner">
<a onClick={this.props.loadClothingItems}>Load Clothing</a>

When I initially load the app I get a console log of "undefined" which is expected as I have not yet populated the App components state but when I click the a-tag it gives me "undefined again".

I was expecting to the the new state of App being passed down to OtherOptions here so I could take the state and render out some li items. Maybe i'm not going about it the right way to communicate with the parent or maybe i'm completely off-track but either way I am stuck and the documentation hasn't helped.


Answer Source

If you need to pass all of the state to the child component then you can do so via props <OtherOptions items={this.state} loadClothingItems={this.loadClothingItems} /> and access it in the child component via this.props.items

Also, I'm not sure what you're trying to accomplish in loadClothingItems, but clothing doesn't exist anywhere so trying to set the state of clothing to clothing will be undefined.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download