I need to update array state in React using useContext and map function

Question

So I am working on a movie app for my friends and I. I have a previous post about a similar issue but I'm now having a different issue trying to update the state of my movieList with useContext and arrays

Here is my useContext array structure:

        {
            id: 0,
            name: "Alpha",
            ranking: "0"
        },
        {
            id: 1,
            name: "Bravo",
            ranking: "0"
        },
        {
            id: 2,
            name: "Charlie",
            ranking: "0"
        },
    ]);

I already have the ability to add new movies with default id and ranking values but I want the app to go to a "voting" page where we all submit a vote and the movies ranking value is updated using an input box.

I'm not sure how I can update the state of this. I know I have to use an onChange method but every time I do call movieList it's not defined as an array

score 0 · Answer 1 · answered Aug 21 '20 at 18:17

0

You can handle these complex state changes with UseReducer hook. https://reactjs.org/docs/hooks-reference.html#usereducer

answered Aug 21 '20 at 18:17

León Ceballos

1
1

score 0 · Answer 2 · answered Aug 21 '20 at 18:23

To update the value in the context from a consumer you have to update the value passed to your context.

Suppose that App component has a state with your main content and you are passing this state to the context provider so you need to update the state from App and not the context directly. You can do that using a callback function passed by props to your child components or even put this callback function as a property in your context.

const {state, updateState} = myContextConsumer

there is a question related that may help you also: How to update the Context value in Provider from the Consumer

I need to update array state in React using useContext and map function

2 Answers2