Cant render the array values using .map()

Question

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:

if someone came here, React warns when you dont use a key, add this <div className="waqt" key={index}> — Abdelouahab
– Abdelouahab, Commented Sep 11, 2015 at 2:43

Felix Kling · Accepted Answer · 2015-09-11 02:11:41Z

2

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.

edited Sep 11, 2015 at 2:11

answered Sep 11, 2015 at 2:06

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Abdelouahab Over a year ago

wonerful! not only worked, but I got a wonderful course about map and about the evil semicolon, thank you !

p2227 · Accepted Answer · 2015-09-11 02:22:04Z

1

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.

answered Sep 11, 2015 at 2:22

p2227

1761 silver badge8 bronze badges

5 Comments

Abdelouahab Over a year ago

but why it works even without this ? Edit: adding this, makes it in an inifinte loop that crashes the browser (Chrome)

p2227 Over a year ago

since i dont have the complete code , i cant run it in your situation. here is my demo jsfiddle.net/znd4ose3/1

Abdelouahab Over a year ago

can you edit the answer and explain the role of this, because it is unclear, since it worked without, but in this example when i remove it, it doesent work.

p2227 Over a year ago

map is called by this.props.meteo.weather,so , in the function ,this is this.props.meteo.weather

Abdelouahab Over a year ago

ah, so using the d as argument did the same trick, thank you again!

Collectives™ on Stack Overflow

Cant render the array values using .map()

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related