Build a Digital Pet Game - Build a Digital Pet Game

JavaScript
1

Tell us what’s happening:

Switching between the “form view” (where the pet name is entered) and the “second view” (where the rest of the app is implemented) works as expected, but the test runner does not mark it as “correct”. I used a is a ternary operator (condition ? yes : no).

export const PetGame = () => {
  const [name, setName] = useState<string>("");
  return <div>
    <h1>Pet Game</h1>
    {
      name == "" ? 
      <FormView setName={setName}/> : 
      <SecondView name={name}/>
    }
  </div>
};

More precisely, I would expect the following tests to succeed, but they don’t

  • 4. When the input is given a value and the button is pressed, the form should no longer be visible.
    • The FormView component uses setName() to (indirectly) hide itself in response to a submit event.
  • 5. The second view should contain an element with class pet-name.
    • SecondView renders the pet name into a <div> with the correct className

There are (obviously) still a lot of missing pieces to the Lab, but I would like to get this sorted out because I expect that most future tests will also fail if the test runner doesn’t “understand” the switch between the views. I also tried switching between display: none; and `display:block; on the <form> element but that didn’t work either to be considered “hidden” for the test runner.

Your code so far

<!-- file: index.html -->
<!-- unmodified -->


/* file: styles.css */
/* unmodified */


/* file: index.tsx */
const { useState } = React;

type CallBack = (a: string) => void;

const FormView = ({setName}: {setName: CallBack}) => {
  const [input, setInput] = useState<string>("");
  return <form 
    onSubmit = {(e) => {
      e.preventDefault()
      setName(input)
    }}
  >
    <label>
      Choose the pet name
      <input type="text" id="pet-name" value={input} 
       onChange={e => setInput(e.target.value)}
       required/>
    </label>
    <button type="submit">Start Game</button>
  </form>
}

const SecondView = ({name}: {name: string}) => {
  return <div>
    <div className="pet-name">{name}</div>
    <button id="eat-action">EAT</button>
    <button id="play-action">PLAY</button>
    <button id="sleep-action">SLEEP</button>
  </div>
}

export const PetGame = () => {
  const [name, setName] = useState<string>("");
  return <div>
    <h1>Pet Game</h1>
    {
      name == "" ? 
      <FormView setName={setName}/> : 
      <SecondView name={name}/>
    }
  </div>
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Challenge Information:

Build a Digital Pet Game - Build a Digital Pet Game

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-digital-pet-game/68c362b379059c388d3874f2.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

It seems the testrunner uses

document.querySelector("#pet-name").value = "Fitzgerald"

which does not trigger the onChange handler of #pet-name. As a result, the onSubmit handler of the <form> executes setName('') which is a no-op.

I’m not sure where to go from here. Getting the input directly from the DOM works but doesn’t feel like the “react way” of doing things.

const handleFormSubmit = (e) => {
    e.preventDefault()
    const el = document.querySelector<HTMLInputElement>("#pet-name")!
    setName(el.value)
}
3

if you have confirmed that the test code is doing this (setting value directly), then you can always open a github issue and ask the maintainers to look into it. You’ll have to share the code you wrote with them and explain your perspective in full so they know where you’re coming from and can decide if the test needs to change.