CODEWITHSUNDEEP
javascriptreactjs
Abdelouahab
Abdelouahab

Reputation: 7539

Cant render the array values using .map()

I have this:

var Astronomy = React.createClass({
getDefaultProps: function() {
    return {meteo : JSON.parse(localStorage.getItem('meteo')).data};
},
render: function() {
    return (
    <div className="temps">
    {this.props.meteo.weather.map(function(d, i) {return
        <div className="waqt">
            <div className="temps">
                <div className="raise">
                    <div className="sunraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunrise"]}</i></div>
                    <div className="sunset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunset"]}</i></div>
                </div>
                <div className="set">
                    <div className="moonraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonrise"]}</i></div>
                    <div className="moonset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonset"]}</i></div>
                </div>
            </div>
        </div>
    }
    )}
    </div>
    );
},
componentDidMount: function() {
return console.log(this.props.meteo.weather[0]["astronomy"][0]["sunrise"]);
},
});

But I get an empty result ! even the console gives what I expect 06:19 AM, and debugging it using chrome extension, I see that the array stayed as it is like in the screenshot:

Screenshot

Upvotes: 1

Views: 144

Answers (2)

p2227
p2227

Reputation: 166

var Astronomy = React.createClass({
getDefaultProps: function() {
    return {meteo : JSON.parse(localStorage.getItem('meteo')).data};
},
render: function() {
    return (
    <div className="temps">
    {this.props.meteo.weather.map(function(d, i) {
    return <div className="waqt">
            <div className="temps">
                <div className="raise">
                    <div className="sunraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunrise"]}</i></div>
                    <div className="sunset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunset"]}</i></div>
                </div>
                <div className="set">
                    <div className="moonraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonrise"]}</i></div>
                    <div className="moonset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonset"]}</i></div>
                </div>
            </div>
        </div>
    },this )}
    </div>
    );
},
componentDidMount: function() {
return console.log(this.props.meteo.weather[0]["astronomy"][0]["sunrise"]);
},
});

this has change in the map function,your can appoint it by the second argument,or use ()=> ES6 arrow function.

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816262

JavaScript will insert a semicolon after return if it is followed by a line break. I.e. 

function foo() {
  return
  42
}

is the same as 

function foo() {
  return;
  42
}

i.e. the last line will never be evaluated and undefined will be returned.

The return value always has to be or start at the same line as the return statement:

return (
  <div>...</div>
);

Also there is no need to access the data as this.props.meteo.weather[i]. That value is already passed to the callback as d, so you can just do d.astronomy[0].sunrise. Learn more about .map in the MDN documentation.

Upvotes: 2

Related Questions