Return json object to render method - React.js

Question

I'm consuming the pokeapi for a personal project and wanted to learn React while doing it. Once managed to retrieve the desire information from the api, like this:

handleSubmit(event) {

        axios.get('https://pokeapi.co/api/v2/pokemon/' + this.state.input_id).then(r => {

            var data = r.data;
            var types = [];
            for (let i = 0; i < 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 => {

            console.log(e);

        }); // axios

        event.preventDefault();

    } // handleSubmit

All i want is to render this pokemon object. This is the way i'm doing it right now:

render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Pokemon's id
                        <input type="text" value={this.state.input_id} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="Find!"/>
                </form>
                <code>{this.state.pokemon}</code>
            </div>
        );
    } // render

Of course, this throws the next error:

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.

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.

Rohit Nethi · Accepted Answer · 2018-07-13 14:10:57Z

3

You cannot print object's or arrays directly in react. While {JSON.stringify(this.state.pokemon)} definitely works and allows you to print out your object as a string, you can also print out your object properties separately if you need to.

You can fix your code by changing {this.state.pokemon} to something like-

{this.state.pokemon.id}
{this.state.pokemon.name} 
{this.state.pokemon.sprite}
{this.state.pokemon.height}
{this.state.pokemon.weight}
{this.state.pokemon.types}

answered Jul 13, 2018 at 14:10

Rohit Nethi

1195 bronze badges

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

2 Comments

enbermudas Over a year ago

This is what I wanted. Thanks for your help!

Rohit Nethi Over a year ago

Glad i could help :)

Tholle · Accepted Answer · 2018-07-13 14:02:00Z

2

React doesn't allow you to have objects as a React child, so you could make it into a string with JSON.stringify first:

<code>{JSON.stringify(this.state.pokemon)}</code>

answered Jul 13, 2018 at 14:02

Tholle

113k22 gold badges209 silver badges198 bronze badges

1 Comment

enbermudas Over a year ago

Even thought i wanted to display each field individually (i explained myself wrong, sorry). This wil be helpful for me so i can see the raw data. Thanks a lot!

Manoj · Accepted Answer · 2018-07-13 14:11:27Z

Althought react do not allow to render object. you can create a function parallel to render and pass object to it and render in that function; something like below.

_render(obj){
   return <code>{obj}</code> //here also jsx syntax are valid.
}

render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Pokemon's id
                        <input type="text" value={this.state.input_id} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="Find!"/>
                </form>
                {this._render(this.state.pokemon)}
            </div>
        );
    } // render

Collectives™ on Stack Overflow

Return json object to render method - React.js

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related