CODEWITHSUNDEEP
reactjsreact-hooks
robert
robert

Reputation: 51

State is undefined from other function

I' m trying to get eventsData from updateScoreHandler. I can't understand, why when I type in input, in console is showing undefined (initial state). In console whe it's starting is showing: changed undefined and after this: changed {elements: Array(2), data: Array(2)} (correct data)

    const [eventsData, setEventsData] = useState<{
       elements: JSX.Element[];
       data: { id: string; home?: number; away?: number }[];
    }>();

    useEffect(() => {
       loadEvents();
    }, []);

    useEffect(() => {
       console.log('hook', eventsData);
    }, [eventsData]);



   const loadEvents = async () => {
       const res = await axios.get(BACKEND_URL + '/events');
       const events = res.data.map((event: MatchType) => (
           <input type="number" onChange={(e) => updateScoreHandler()} />
       )

    setEventsData({ elements: events, data: res.data });
   };

    const updateScoreHandler = () => {
    console.log(id, value, target, eventsData);
    };

Upvotes: 0

Views: 33

Answers (1)

andy mccullough
andy mccullough

Reputation: 9571

firstly, don't store JSX elements in state, your probably running into stale scope problems or something, i.e. at the time of storing your inputs in state updateScoreHandler will have eventsData as undefined

try something like -

const loadEvents = async () => {
    const res = await axios.get(BACKEND_URL + '/events');
    setEvents(res.data);
};

then

const updateScoreHandler = (event) => {
    // do something with event?
};

...

return (
   ...

   {events.map(event => (
       <input type="number" onChange={(e) => updateScoreHandler(event)} />
    ))}

   ...
)

Upvotes: 1

Related Questions