theJuls theJuls - 2 months ago 12
React JSX Question

Rendering a object onto a React component

I thought this would be a simple task, but I've been working on this all day but still can't seem to figure it out.

I am receiving a very large (multiple layers of objects) JSON file which I stored in a state of my component, now I need to render that data on the screen. This has become difficult, because within the object I have several others objects which also may contain other objects.

So far, I am using

Object.keys(myJSONObject).map(...)
to try to get it done, however I can't seem to find a way to reach all the 'sub-objects'. Here is my current code:

render: function(){
return (

<div>

{
Object.keys(_this.state.content).map(function (key) {
if (typeof _this.state.content[key] instanceof Object){
//go through all objects and sub-objects???

}
return <div > Key: {
key
}, Value: {
_this.state.content[key]

} </div>;
})
}


</div>
);
}


Edit: I should probably add that my object is
_this.state.content


Edit 2: Here is an example of the object I am looking to iterate through. Keep in mind that is it a lot bigger than this.

{ "3.8": [ "Something something" ],
"3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ],
"2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ]}


Edit 3: Here is how I would somewhat like it to look when rendered:

3.8:
- Something something
3.2:
- Blabla:
- More things I am saying
- Blablablabal
- Whatever
2.9:
-Foo:
-bar
...

Answer

Is this what your are after: http://codepen.io/PiotrBerebecki/pen/PGjVxW

The solution relies on using React's reusable components. It accepts objects of varying levels of nesting as per your example. You can adjust it further to accommodate even more types of objects.

const stateObject = {
  "3.8": [ "Something something" ], 
  "3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ],
  "2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ]
} 


class App extends React.Component {
  render() { 
    const renderMainKeys = Object.keys(stateObject)
      .map(mainKey => <MainKey mainKey={mainKey} 
                      innerObject={stateObject[mainKey]} />);   

    return (
      <div>
        {renderMainKeys}
      </div>
    );
  }
}


class MainKey extends React.Component {
  render() {
    if (typeof this.props.innerObject[0] === 'string') {
      return (
        <div>
          <h4>{this.props.mainKey}</h4>
          <ul>
            <li>{this.props.innerObject[0]}</li>
          </ul>
        </div>
      );
    }

    const innerObjectKey = Object.keys(this.props.innerObject[0])[0];
    const innerList = this.props.innerObject[0][innerObjectKey];

    return (
      <div key={this.props.mainKey}>
        <h4>{this.props.mainKey}</h4>
        <InnerKey innerObjectKey={innerObjectKey} innerList={innerList}/>
      </div>
    )
  }
}

class InnerKey extends React.Component {  
  render() {
    return (
      <ul>
        <li>{this.props.innerObjectKey}</li>
        <InnerList innerList={this.props.innerList} />
      </ul>
    )
  }
}


class InnerList extends React.Component {   
  render() {
    if (!Array.isArray(this.props.innerList)) {
      return (
        <ul>
          <li>{this.props.innerList}</li>
        </ul>
      );
    }

    const listItems = this.props.innerList.map(function(item, index) {
      return <li key={index}>{item}</li>;
    });

    return (
      <ul>
        {listItems}
      </ul>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);
Comments