How do you access react hooks in multiple components? What am I doing wrong with my react hook?

Question

Im trying to pass a state value into a component. Why is it working in one component and not working in another component in the same folder?

I have the hooks in here. Im trying to access "currentGuess". In this function I initialize the state of currentGuess to "", then the next part just sets the "currentGuess" to whatever you type in.

----------------------/src/hooks/useWordle.js----------------------

const useWordle = (solution) => {
  const [currentGuess, setCurrentGuess] = useState("");

  /* OTHER UNNECESSARY CODE TO QUESTION */

  const handleInput = ({ key }) => {
    if (key === "Enter") {
      if (turn > 5) {
        console.log("You used all your guesses!");
        return;
      }
      if (history.includes(currentGuess)) {
        console.log("You already tried that word!");
        return;
      }
      if (currentGuess.length !== 5) {
        console.log("Word must be 5 characters long!");
        return;
      }
      const formatted = formatGuessWord();
      console.log(formatted);
    }
    if (key === "Backspace") {
      setCurrentGuess((state) => {
        return state.slice(0, -1);
      });
    }

    if (/^[a-zA-z]$/.test(key))
      if (currentGuess.length < 5) {
        setCurrentGuess((state) => {
          return state + key;
        });
      }
  };
  return {
    currentGuess,
    handleInput,
  };
};

export default useWordle;

I can use it in here like this and it works no problem:

----------------------src/components/Wordle.js----------------------

import React, { useEffect } from "react";
import useWordle from "../hooks/wordleHooks.js";

function Wordle({ solution }) {
  const { currentGuess, handleInput } = useWordle(solution);
  console.log("currentGuess=", currentGuess);

  useEffect(() => {
    window.addEventListener("keyup", handleInput);

    return () => window.removeEventListener("keyup", handleInput);
  });

  return <div>Current guess: {currentGuess}</div>;
}

export default Wordle;

I thought this line was what allowed me to use "currentGuess". I destructured it.

const { currentGuess, handleInput } = useWordle(solution);

However when I place that line in this code, "currentGuess" comes out undefined or empty.

----------------------/src/components/Key.js----------------------

import React, { useContext } from "react";
import { AppContext } from "../App";
import useWordle from "../hooks/wordleHooks.js";

export default function Key({ keyVal, largeKey }) {
  const { onSelectLetter, onDeleteKeyPress, onEnterKeyPress } =
    useContext(AppContext);
  const { currentGuess } = useWordle();

  const handleTypingInput = () => {
    console.log("Key.js - Key() - handleTypingInput() - {currentGuess}= ", {
      currentGuess,
    }); // COMES OUT "Object { currentGuess: "" }"
  };

If you made it this far thank you very much. Im new to this and hoping someone who knows what they are doing can see some glaring flaw in the code I can fix. You don't even have to solve it for me but can you point me in the right direction? How do I make the "currentGuess" variable/state be accessible in the Key.js component?

For future reference, see: [How do I create a React Stack Snippet?](https://meta.stackoverflow.com/a/338538/979052). It makes it a lot easier to quickly run the code, when it's an interactive snippet, therefore giving you better answers. — Alicia Sykes, Apr 29 '22 at 21:11
can you do that when its multiple files/components all over the place though? How do you add a bunch of files and child components passing stuff to each other in the one JS block they give you? Can I just upload to github and convert it that way? — Spoony Luv, Apr 29 '22 at 21:45

Brendan Bond · Answer 1 · 2022-11-30T17:56:35.043

1

Hooks are meant to share behavior, not state. The call to useWordle in your Wordle component creates a completely different variable in memory for currentGuess than the call to useWordle in the Key component (remember, after all, that hooks are just regular old functions!). In other words, you have two completely separate versions of currentGuess floating around, one in each component.

If you'd like to share state, use the Context API, use a state management library (such Redux, MobX, etc.), or just lift state up.

edited Nov 30 '22 at 17:56

answered Apr 29 '22 at 21:16

Brendan Bond

1,737
1
10
8

might be a stupid question, but in the "lift state up" link the examples use class components and a lot of "this". Can you still do it when using functional components? – Spoony Luv Apr 29 '22 at 21:40
@SpoonyLuv absolutely. I'll edit my answer with an example as soon as I can. – Brendan Bond Apr 30 '22 at 01:41
@SpoonyLuv realized I never got to this, see https://beta.reactjs.org/learn/sharing-state-between-components#lifting-state-up-by-example – Brendan Bond Nov 30 '22 at 17:56

How do you access react hooks in multiple components? What am I doing wrong with my react hook?

1 Answers1