CODEWITHSUNDEEP
javascriptreactjs
enbermudas
enbermudas

Reputation: 1615

Return json object to render method - React.js

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.

Upvotes: 2

Views: 20073

Answers (3)

Manoj
Manoj

Reputation: 1195

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

Upvotes: 1

Rohit Nethi
Rohit Nethi

Reputation: 119

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}

Upvotes: 3

Tholle
Tholle

Reputation: 112787

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>

Upvotes: 2

Related Questions