CODEWITHSUNDEEP
reactjsreact-hooks
youngho Park
youngho Park

Reputation: 35

useState doesn't change the state in React

[Mycode] (https://codesandbox.io/s/romantic-kowalevski-fp00l?file=/src/App.js)

I'm practicing React by making todo-list app.
I want my input empty when i hit Enter. but it didn't work.

here is my whole code :

const Todo = ({ text }) => {
  return (
    <div>
      <span>{text}</span>
    </div>
  );
};

const InputText = ({ addTodo }) => {
  const [txt, setTxt] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!txt) return;
    addTodo(txt);
    setTxt("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => setTxt(e.target.value)}></input>
    </form>
  );
};

function App() {
  const [todos, setTodos] = useState([]);
  const addTodo = (text) => {
    const newTodos = [...todos, text];
    setTodos(newTodos);
  };
  return (
    <>
      <div className="todo-list">
        {todos.map((val, idx) => {
          return <Todo key={val + idx} text={val} />;
        })}
        <InputText addTodo={addTodo} />
      </div>
    </>
  );
}

line 17 on the link, setTxt(""); doesn't change state of txt.
how can i fix it?

Upvotes: 0

Views: 82

Answers (2)

Suraj Auwal
Suraj Auwal

Reputation: 318

You actually need to set the input value to your state.

Try something like 

<Input type="text" onChange={(e) => setTxt(e.target.value)} value={txt}/>

I hope it helps.

Upvotes: 1

xabitrigo
xabitrigo

Reputation: 1431

That is not a "controlled" component since you are not using the value property on the input.

Try

      <input type="text" onChange={e => setTxt(e.target.value)} value={txt} />

https://reactjs.org/docs/forms.html

Upvotes: 3

Related Questions