CODEWITHSUNDEEP
reactjs
Louis93
Louis93

Reputation: 3913

Why is my React Component not updating according to its state value here?

Here's my setup: 

var PageController = React.createClass({
    getInitialState: function(){
        return {
            'activePage': null,
            'saved': [],
        };
    },  
    savedRoutes: function(){
        return (
            <div className="viewContainer">
            {
                this.state.saved.map(function(route) {
                    console.log('ROUTE', route.destName) // ROUTE PRINTS OUT A STRING HERE
                    return 
                        <div className='favouritedRoute'>
                            <div>Destination: {route.destName}</div>
                            <button>Go!</button>
                        </div>
                })
            }   
            </div>
        );
    }

Where the route has just been pulled in from a rest-point.

However, in the line I emphasized above, route ALWAYS is a valid object with a destinationName, however that entire bit within the .map never seems to get rendered!

this.state.saved does not change after it gets the result. In addition, from the console, I forced updates of the component, but nothing seemed to happen, even though when I directly accessed the state variable, it was clearly valid.

What's going on here?

Upvotes: 0

Views: 258

Answers (1)

icktoofay
icktoofay

Reputation: 128991

JavaScript’s ASI (Automatic Semicolon Insertion) rule at work. Whenever you see a return statement continued on the next line, be wary, for JavaScript will insert a semicolon there. In particular, your code is changed to this, where it returns nothing and leaves dead code:

return;
<div className='favouritedRoute'>
    <div>Destination: {route.destName}</div>
    <button>Go!</button>
</div>;

Solution: don’t break a line there.

Upvotes: 6

Related Questions