load json with reactjs

Question

I'll be very grateful who can help me with this line I've this:

 var Country = React.createClass({
        render:function(){
            return(
                <nav> 
                <h2>list of country:</h2>
                { this.props.country}
                </nav>
            )
        }
    }) 
    var Jugador =React.createClass({
          componentWillMount: function(){
                var pais;
                var self = this;
                $.getJSON("https://restcountries.eu/rest/v1/all", function(data){
                    for(pais in data)
                    {
                        console.log(pais, data[pais].name);

                        return(
                            <Country key={i} country={self.render(data[pais].name)}> </Country>
                        )
                    }
                })
          },
    })

and it does not work, and appear this error Uncaught Invariant Violation: createClass(...): Class specification must implement a render method.

Jugador doesn't have a render method. Is it a react component? — Sigfried
– Sigfried, Commented Mar 14, 2016 at 12:14

Patrick Grimard · Accepted Answer · 2016-03-14 12:15:02Z

1

Your Jugador component needs to implement a render method.

answered Mar 14, 2016 at 12:15

Patrick Grimard

7,1169 gold badges53 silver badges69 bronze badges

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

Comments

Oleksandr T. · Accepted Answer · 2016-03-14 12:16:39Z

In React each component must have render method, you should implement it. I've refactored your code and now it look like this

var Country = React.createClass({
  render: function() {
    return <div> 
      { this.props.country }
    </div>
  }
})

var Countries = React.createClass({
  getInitialState: function () {
    return { countries: [] };
  },

  componentWillMount: function(){
    $.getJSON("https://restcountries.eu/rest/v1/all", function (data) {
      this.setState({ countries: data })
    }.bind(this))
  },

  render: function () {
    var countries = this.state.countries.map(function (el, i) {
      return <Country key={i} country={ el.name } />
    }, this);

    return <nav>
      <h2>list of country:</h2>
      <div>{ countries }</div>
    </nav>;
  }       
})

Example

Collectives™ on Stack Overflow

load json with reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related