Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – setText state not clearing when submit is pressed

The problem is this: When the user presses "submit" the handleSubmit function does two things 1) Adds the item to the array of todos, 2) Sets the TextInput to "" so that it would clear itself.

So it’s basically focused on the single AddTodo component.

But why isn’t it clearing ?

import { useState } from "react";
import {
  Text,
  FlatList,
  View,
  StyleSheet,
  Button,
  TextInput,
} from "react-native";

import { Header } from "./components/header";
// import { AddTodo } from "./components/addTodo";
import { TodoItem, TodoItemProps } from "./components/todoItem";

export default function App() {
  const [todos, setTodos] = useState<TodoItemProps[]>([]);
  const [text, setText] = useState("");

  function pressHandler(id: string) {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  }

  function submitHandler(text: string) {
    setTodos((prevTodos) => [
      { text, id: Math.random().toString() },
      ...prevTodos,
    ]);
    setText("");
  }

  function handleChange(val: string) {
    setText(val);
  }
  return (
    <>
      <View style={styles.container}>
        <Header />
        <Text style={styles.info}>
          Write in the text input & submit to add them.
        </Text>
        <Text style={styles.info}>
          Double Click in the items to remove them.
        </Text>
        <View>
          <FlatList
            data={todos}
            renderItem={({ item }) => (
              <TodoItem item={item} pressHandler={pressHandler} />
            )}
            keyExtractor={(item) => item.id}
          />
        </View>
        <AddTodo
          handleSubmit={submitHandler}
          handleChange={handleChange}
          text={text}
        />
      </View>
    </>
  );
}

export function AddTodo({
  handleSubmit,
  handleChange,
  text,
}: {
  handleSubmit: (text: string) => void;
  handleChange: (val: string) => void;
  text: string;
}) {
  return (
    <View>
      <TextInput
        style={styles.input}
        placeholder="Write New Todo"
        onChangeText={handleChange}
        value={text}
      />
      <Button
        title="Add Todo"
        onPress={() => handleSubmit(text)}
        color="coral"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  list: {
    flex: 1,
    margin: 20,
  },
  info: {
    textAlign: "center",
    fontSize: 20,
    fontWeight: "bold",
    padding: 20,
  },
  input: {
    margin: 20,
    padding: 20,
    borderWidth: 1,
    borderColor: "coral",
    borderRadius: 10,
    backgroundColor: "#f0f0f0",
  },
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved, actually using Gemini (copilot failed repeteadly). It was somewhat tricky. This is the updated code (only the Button.)

          <Button
        title="Add Todo"
        onPress={(event) => {
          event.preventDefault();
          handleSubmit(text);
        }}
        color="coral"
      />

    i.e just use preventDefault.


  2. 0

    It seems the issue is with clearing the TextInput value after submission. Let’s try this.

    function submitHandler(text: string) {
  setTodos((prevTodos) => [
    { text, id: Math.random().toString() },
    ...prevTodos,
  ]);
  setText(""); // Clear the text state after adding todo
}

function handleChange(val: string) {
  setText(val); // Update the text state as the input changes
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search