CODEWITHSUNDEEP
javascriptjqueryhtmlreactjs
fgonzalez
fgonzalez

Reputation: 3877

Issue rendering a unsorted list in reactjs

I would need a react js expert to help me out with this.

I'm learning react js and as a first try, I would like to create a component that represents two select boxes, one for the different currencies and the other for the different languages allowed in the application.

So I have created a component "ListItemWrapper" that represents a li html element and "LanguageCurrencySwitcher" representing both select boxes.

The call to the server to get the currencies and languages is working fine and the information is retrieved correctly.

Once in the client side, I need to iterate through both lists to create the "li" html elements. During the iteration if I output the values using "console.log(result);", the values are printed correctly in the console. However the component ListItemWrapper is not being displayed so the list is not filled, but if I try to display the ListItemWrapper outside of the loop, the "li" element is displayed correctly.

What am I missing? Could someone tell me how can fix this problem?

Below the code:

var ListItemWrapper = React.createClass({

render: function () {
    console.log("title:" + this.props.title);
    return <li onClick={this.handleClick}><a href="#">{this.props.title}</a></li>
},

handleClick: function (event) {
    console.log(event.target);
}
});


var LanguageCurrencySwitcher = React.createClass({


getInitialState: function () {

    return {data: {currencies: [], languages: []}};

},

render: function () {
    return <ul className="switchers">
        <li>$
            <ul className="dropdown">
                {
                    this.state.data.currencies.forEach(function(result){
                        console.log(result);
                        <ListItemWrapper title={result} />
                    })
                }
            </ul>
        </li>
        <li>En
            <ul className="dropdown">
                {
                    this.state.data.languages.forEach(function(result){
                        console.log(result);
                        <ListItemWrapper  title={result} />
                    })

                }
            </ul>
        </li>
    </ul>
},


componentDidMount: function () {
    $.get('/std/rest/data/switchers', function (result) {
        console.log(result);
        if (this.isMounted()) this.setState({data: result});
    }.bind(this));
},




});


ReactDOM.render(
<LanguageCurrencySwitcher/>,
document.getElementById('language-currency-switcher')
);

Upvotes: 0

Views: 147

Answers (1)

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36408

You're using .forEach() when you should be using .map().

You should be doing

this.state.data.currencies.map(function(result){
  return <ListItemWrapper title={result} />;
})

See Array::map.

Upvotes: 2

Related Questions