How do I update an array using the useContext hook?

user_7863218 0
Viewed 7083

I've set a Context, using createContext, and I want it to update an array that will be used in different components. This array will receive the data fetched from an API (via Axios).

Here is the code:

Context.js

import React, { useState } from "react";

const HeroContext = React.createContext({});

const HeroProvider = props => {
  const heroInformation = {
    heroesContext: [],
    feedHeroes: arrayFromAPI => {
      setHeroesContext(...arrayFromAPI);
      console.log();
    }
  };

  const [heroesContext, setHeroesContext] = useState(heroInformation);

  return (
    <HeroContext.Provider value={heroesContext}>
      {props.children}
    </HeroContext.Provider>
  );
};

export { HeroContext, HeroProvider };

See above that I created the context, but set nothing? Is it right? I've tried setting the same name for the array and function too (heroesContex and feedHeroes, respectively).

Component.js

import React, { useContext, useEffect } from "react";
import { HeroContext } from "../../context/HeroContext";
import defaultSearch from "../../services/api";

const HeroesList = () => {
  const context = useContext(HeroContext);

  console.log("Just the context", context);

  useEffect(() => {
    defaultSearch
      .get()
      .then(response => context.feedHeroes(response.data.data.results))
      .then(console.log("Updated heroesContext: ", context.heroesContext));
  }, []);

return (
//will return something
)

In the Component.js, I'm importing the defaultSearch, that is a call to the API that fetches the data I want to push to the array.

If you run the code right now, you'll see that it will console the context of one register in the Just the context. I didn't want it... My intention here was the fetch more registers. I have no idea why it is bringing just one register.

Anyway, doing all of this things I did above, it's not populating the array, and hence I can't use the array data in another component.

Does anyone know how to solve this? Where are my errors?

react-hooks reactjs
1 Answers

The issue is that you are declaring a piece of state to store an entire context object, but you are then setting that state equal to a single destructured array.

So you're initializing heroesContext to 

const heroInformation = {
    heroesContext: [],
    feedHeroes: arrayFromAPI => {
      setHeroesContext(...arrayFromAPI);
      console.log();
    }
  };

But then replacing it with ...arrayFromAPI.

Also, you are not spreading the array properly. You need to spread it into a new array or else it will return the values separately: setHeroesContext([...arrayFromAPI]);

I would do something like this:

const HeroContext = React.createContext({});

const HeroProvider = props => {

  const [heroes, setHeroes] = useState([]);

  const heroContext = {
    heroesContext: heroes,
    feedHeroes: arrayFromAPI => {
      setHeroes([...arrayFromAPI]);
    }
  };


  return (
    <HeroContext.Provider value={heroContext}>
      {props.children}
    </HeroContext.Provider>
  );
};

export { HeroContext, HeroProvider };
user_105491650
Related