How to change object's attribute in React

Question

I want to change the "height" value of the object "pokemon"

state = {
    loaded: true,
    error: false,
    pokemon: {
        id: this.props.number,
        number: this.props.number,
        name: this.props.name,
        height: 188,
    }
}

But when I try Prevstate it doesn't work:

        axios.get('https://pokeapi.co/api/v2/pokemon/' + this.state.pokemon.number)
        .then(response =>{
            this.setState(prevState =>({
                pokemon: {
                    ...prevState.pokemon,
                    height: response.height
                }
            }))
        })

Does this answer your question? [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — Emile Bergeron, Nov 02 '20 at 19:41

score 0 · Accepted Answer · answered Nov 02 '20 at 19:23

0

I think you are missing the .data after response.

pokemon: {
  ...prevState.pokemon,
  height: response.data.height
}

answered Nov 02 '20 at 19:23

user2953241

366
2
11

score -1 · Answer 2 · answered Nov 02 '20 at 19:25

import React, { useEffect, useState } from "react";
import axios from "axios";

function Pokemon({ number, name }) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);
  const [pokemon, setPokemon] = useState({
    id: number,
    number: number,
    name: name,
    height: 188
  });

  useEffect(() => {
    (async () => {
      try {
        const { data } = await axios.get(
          "https://pokeapi.co/api/v2/pokemon/" + number
        );
        console.log(data);
        setPokemon((oldPokemon) => ({
          ...oldPokemon,
          height: data.height
        }));
        setIsLoading(true);
      } catch (error) {
        console.error(error);
        setError(error);
      }
    })();
  }, [number]);

  return (
    <div className="App">
      {error && error}
      {!isLoading && "loading"}
      {isLoading && `Height: ${pokemon.height}`}
    </div>
  );
}

export default function App() {
  return <Pokemon number={1} name="Poke" />;
}

How to change object's attribute in React

2 Answers2