title: Return json object to render method - React.js
body: <p>I'm consuming the <a href="https://pokeapi.co/" rel="nofollow noreferrer">pokeapi</a> for a personal project and wanted to learn React while  doing it. Once managed to retrieve the desire information from the api, like this:</p>
  
  <pre><code>handleSubmit(event) {
  
          axios.get('https://pokeapi.co/api/v2/pokemon/' + this.state.input_id).then(r =&gt; {
  
              var data = r.data;
              var types = [];
              for (let i = 0; i &lt; data.types.length; i++) types.push(data.types[i].name);
  
              const pokemon = {
                  id: data.id,
                  name: data.name,
                  sprite: data.sprites.front_default,
                  height: data.height,
                  weight: data.weight,
                  types: types,
              };
  
              this.setState({
                  pokemon: pokemon
              });
  
          }).catch(e =&gt; {
  
              console.log(e);
  
          }); // axios
  
          event.preventDefault();
  
      } // handleSubmit
  </code></pre>
  
  <p>All i want is to render this pokemon object. This is the way i'm doing it right now:</p>
  
  <pre><code>render() {
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;label&gt;
                          Pokemon's id
                          &lt;input type="text" value={this.state.input_id} onChange={this.handleChange} /&gt;
                      &lt;/label&gt;
                      &lt;input type="submit" value="Find!"/&gt;
                  &lt;/form&gt;
                  &lt;code&gt;{this.state.pokemon}&lt;/code&gt;
              &lt;/div&gt;
          );
      } // render
  </code></pre>
  
  <p>Of course, this throws the next error:</p>
  
  <pre><code>Objects are not valid as a React child (found: object with keys {id, name, sprite, height, weight, types}). If you meant to render a collection of children, use an array instead.
  </code></pre>
  
  <p>Is there a way to render this object inside the table? I guess it would be without saving the data inside the state but i don't know how to do so.</p>