Реакция - Проблема с синтаксисом

Question

Я пытаюсь протестировать для себя. Я получил сообщение «Hello World», которое было успешно отправлено, поэтому я попытался сделать этот шаг дальше и перебрать данные.

Я получаю «ожидание загрузки корней ... для перезагрузки инспектора», которая после того, как Гуглинг говорит мне, что у меня проблема с моим синтаксисом. Я просто не могу ее найти ... так что ваша помощь высоко ценится!

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")); 

Answer 1

Это кажется, что вы могли бы упростить немного.

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"));