Using query get JSON and use it in my React component

Question

I am trying to access JSON data by Jquery $.getJSON function in my React component, but I keep getting this error:

Invariant Violation: Minified React error #31; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Busername%2C%20img%2C%20alltime%2C%20recent%2C%20lastUpdate%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Objects are not valid as a React child (found: object with keys {username, img, alltime, recent, lastUpdate}).

This my code here.Don't quite know where the problem is.....

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: '',
      second: ''
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      self.setState({first:data});
      console.log(this.state.first);
    });
  }
  render() {
    return (<div>
      <pre>{this.state.first}</pre>
      <pre>{this.state.second}</pre>
      </div>)
  }

}

ReactDOM.render(<Board />, document.getElementById('mine'));

What about keeping the JSON file encoded and then decode it in render()? Otherwise take a look here: stackoverflow.com/questions/37997893/… — Theraloss
– Theraloss, Commented Feb 2, 2017 at 14:43

score 1 · Accepted Answer · 2017-02-02 16:46:32Z

1

You cannot render an array of objects. React knows how to render components. A solution is to map over the array coming from the XHR response, and render each single object.

Your render function should look like:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: [],
      second: []
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      console.log(data)
      self.setState({first:data});
    });
  }
  render() {
    return (
      <div>
            {this.state.first.map((el, i) => <pre key={i}>{JSON.stringify(el, null, ' ')}</pre>)}
      </div>
    )
  }
}

ReactDOM.render(<Board />, document.getElementById('container'));

Also note I've changed the initial state to an empty array (in order to be able to map over it)

edited Feb 2, 2017 at 16:46

answered Feb 2, 2017 at 15:23

user1234511

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

1 Comment

Philipl Over a year ago

yeah thanks for the correct concept!I l figured what the problem was!Actually I just want to see the results on the <pre>,so then I use JSON.stringify to fix the problem.

Collectives™ on Stack Overflow

Using query get JSON and use it in my React component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related