Estoy haciendo sólo cosas básicas. Tengo un campo de entrada y un botón dentro de la etiqueta del formulario. usando el gancho useState para configurar el nombre de usuario de entrada.
El navegador me da error: - TypeError: setUser no es una función y falla en la línea 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;
------------------------------------
usaste llaves en lugar de corchetes. simplemente cambia tu código a
const [ user, setUser ] = useState("");
y debería ejecutarse.
------------------------------------
useState returnns una matriz, no un objeto.
// this is wrong
//const { user, setUser } = useState("");
// this is correct
const [ user, setUser ] = useState("");
------------------------------------
intenta usar onChange={ e => setUser(e.target.value)} o definió una función
ejemplo:
const handleChange = (e) => {
const {value, name} = e.target;
setUser(value)
}
<input
type="text"
placeholder="nick name"
value={user}
onChange={ handleChange } }
/>
------------------------------------
Pruebe esto, tiene un problema con la forma en que declaró useState con {} y no con [].
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;