How to access nested object in React js 0.13.3

Question

The below added code is working fine in React js 0.10.0. I wanna run same code in 0.13.0 version also. My main requirement is accessing nested object as default object like "this.state.data.query.results.channel.item.condition.temp".

<!doctype html>
<html>
<head>
    <title>Weather Widget</title>
    <link rel="stylesheet" href="weather.css" />
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/jsx">
    /*** @jsx React.DOM */
    var weatherWidget = React.createClass({
        loadData: function(){
            $.ajax({
                url: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%2222102%22&format=json',
                dataType : "jsonp",
                cache: false,
                success: function(data) {
                    console.log(data)
                    this.setState({data: data});
              }.bind(this)
            });
        },
        getInitialState: function(){
            return {data: []};
        },
        componentWillMount: function(){
            this.loadData();
        },
        render: function(){
            return(
                <div className="ww-container">
                    <div className="ww-current-condition">
                        <div className="ww-current-temperture">{this.state.data.query.results.channel.item.condition.temp}&deg;</div>
                    </div>
                </div>
            )
        }
    });

    React.renderComponent(<weatherWidget />, document.body);
</script>
</body>

</html>

http://jsfiddle.net/xJvY5/

Oleksandr T. · Accepted Answer · 2015-06-16 05:52:14Z

2

You should set initial state, like so

getInitialState: function(){
    return {
        data: {
            query: {
                results: {
                    channel: {item: {condition: {temp: 0}}}     
                }
            }
        }
    };
},

Example - (v 0.10.0)

Example - (v 0.13.3) - Note - that in version 0.13.3 you should use .render method instead of .renderComponent

or you can check data in render method, if data is undefined - show loading...., if state was updated you will see your data

getInitialState: function(){
  return {};
},

render: function() {
  if (!this.state.data) {
       return <div>Loading...</div>;
  }
  ....
}

Example - (v 0.13.3)

edited Jun 16, 2015 at 5:52

answered Jun 16, 2015 at 5:37

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ianyoung Over a year ago

I've encountered a similar problem where I can't access nested objects via regular dot notation. Why do you need to specify the full nested structure of objects when setting state?

Collectives™ on Stack Overflow

How to access nested object in React js 0.13.3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related