CODEWITHSUNDEEP
reactjsreact-hooks
Chandler Bing
Chandler Bing

Reputation: 479

How can I resolve my react hook TypeError: setUser is not a function problem?

I'm doing just basic stuff. I've one input field and a button wrap inside of form tag. using useState hook for setting input user name.
browser is giving me error:- TypeError: setUser is not a function and fault in line no. 21.

  18 |   type="text"
  19 |   placeholder="nick name"
  20 |   value={user}  
> 21 |   onChange={ e => { setUser(e.target.value) } }
     | ^  22 | />
  23 | <button type="submit" onClick={StartQuiz}>
  24 |   Start the Quiz

import React, { useContext, useState } from "react";
import { QuizContext } from "../Helpers/Context";

function MainMenu() {
  const { user, setUser } = useState("");
  const { setGame } = useContext(QuizContext);

  const StartQuiz = (event) => {
    event.preventDefault();
    setGame("quiz");
    setUser("");
  };

  return (
    <div className="Menu">
      <form>
        <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={ e => { setUser(e.target.value) } }
        />
        <button type="submit" onClick={StartQuiz}>
          Start the Quiz
        </button>
      </form>
    </div>
  );
}

export default MainMenu;

Upvotes: 0

Views: 946

Answers (4)

Michael Parkadze
Michael Parkadze

Reputation: 452

Try this, you have an issue with how you declared the useState in with {} and not [].

import React, { useContext, useState } from "react";
import { QuizContext } from "../Helpers/Context";

function MainMenu() {
  const [user, setUser] = useState("");
  const { setGame } = useContext(QuizContext);

  const StartQuiz = (event) => {
    event.preventDefault();
    setGame("quiz");
    setUser("");
  };

  return (
    <div className="Menu">
      <form>
        <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={(e) => setUser(e.target.value)}
        />
        <button type="submit" onClick={StartQuiz}>
          Start the Quiz
        </button>
      </form>
    </div>
  );
}

export default MainMenu;

Upvotes: 0

Syder
Syder

Reputation: 372

useState returns an array, not an object.

// this is wrong
//const { user, setUser } = useState("");
// this is correct
const [ user, setUser ] = useState("");

Upvotes: 1

jcHernande2
jcHernande2

Reputation: 291

try use onChange={ e => setUser(e.target.value)} or defined a function

example:

const handleChange = (e) => {
         const {value, name} = e.target;
         setUser(value)
      }

 <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={ handleChange } }
        />

Upvotes: 0

SanQu
SanQu

Reputation: 71

you used curly brackets instead of square brackets. just change your code to

const [ user, setUser ] = useState("");

and it should run.

Upvotes: 2

Related Questions