CODEWITHSUNDEEP
javascriptreactjs
steeped
steeped

Reputation: 2633

React - Issue with syntax

I'm trying to test React out for myself. I got a simple "Hello World" message outputted successfully, so I tried taking this a step further and loop through data.

I'm getting a "waiting for roots to load…to reload the inspector” error, which after Googling tells me I have an issue with my syntax. I just can't find it... so your help is much appreciated!

var data = [
    {perc:"2.2%", year:"5"},
    {perc:"3.2%", year: "7"} 
]

var Rates = React.createClass({
    render: function(){
        return (
            <div>
                <RateList data={this.props.rates} />
            </div>
        )
    }
});

var Rate = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    <li>{this.props.percent}</li>
                </ul>
            </div>
        )
    }
});

var RateList = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    { this.props.data.map(function(rate){
                        return <Rate percent={rate.perc} />
                    }) }
                </ul>
            </div>
        )
    }
});

ReactDOM.render(<Rates rates={data} />, document.getElementById("wow"));

Upvotes: 0

Views: 79

Answers (1)

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

It seems you could simplify a little.

var data = [
    {perc:"2.2%", year:"5"},
    {perc:"3.2%", year: "7"} 
]

var RateList = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    { this.props.rates.map(function(rate){
                        return <li>{rate.perc}</li>
                    }) }
                </ul>
            </div>
        )
    }
});

ReactDOM.render(<RateList rates={data} />, document.getElementById("wow"));

Upvotes: 1

Related Questions