Clear Text Input data once submit button clicked in react native

Question

Hi I want to clear the text after submitting the val in the Text Input in the react-native code Here is my code

export default function AddTodo({onSubmit}) {
    const [text, setText] = useState('')
    const changeHandler = (val) => {
        setText(val)
    }
    return (
        <View>
            <TextInput
                style={styles.newInput}
                placeholder="Add task"
                onChangeText={changeHandler}
            />
            <Button onPress={() => onSubmit(text)} title="Add Task" color='#1881e9' />
        </View>
    )
}

Goskula Jayachandra · Accepted Answer · 2020-04-26 05:56:31Z

Add a value attribute to your TextInput like this

<TextInput
                style={styles.newInput}
                placeholder="Add task"
                onChangeText={changeHandler}
                value = {text}
            />

And then clear the text when on submit like this

  <Button onPress={() => {
            onSubmit(text)
            setText('') }} title="Add Task" color='#1881e9' />

Total code will be something like this:

import React from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import  {useState} from 'react';
export default function AddTodo({onSubmit}) {
    const [text, setText] = useState('')
    const changeHandler = (val) => {
        console.log("val is",val);
        setText(val)
    }

    return (
        <View style={{marginTop:100}}>
            <TextInput
                placeholder="Add task"
                onChangeText={changeHandler}
                value={text}
            />
            <Button onPress={() => {
                onSubmit(text)
                setText('') }} title="Add Task" color='#1881e9' />
        </View>
    )
}

Hope this helps!

Abhishek Chatterjee · Accepted Answer · 2020-04-25 18:49:11Z

1

Here is a code snippet for your problem with the solution.

export default function AddTodo({onSubmit}) {
const [text, setText] = useState('')
const changeHandler = (val) => {
    setText(val)
}

const handleSumit = () => {
    // perform the summit operation
    setText("");
}
return (
    <View>
        <TextInput
            style={styles.newInput}
            placeholder="Add task"
            onChangeText={changeHandler}
        />
        <Button onPress={handleSumit} title="Add Task" color='#1881e9' />
    </View>
)

}

answered Apr 25, 2020 at 18:49

Abhishek Chatterjee

3383 silver badges14 bronze badges

Comments

tksilicon · Accepted Answer · 2020-04-25 18:51:38Z

1

Call no arg onSubmit()

<Button onPress={() => onSubmitAndClear(text)} title="Add Task" color='#1881e9' />

    const onSubmitAndClear() = (text) => {
            setText(text)
         /// after submit operation then clear

          setText('')
        }

edited Apr 25, 2020 at 18:51

answered Apr 25, 2020 at 18:44

tksilicon

4,5664 gold badges29 silver badges37 bronze badges

1 Comment

Abhishek Chatterjee Over a year ago

check the syntax, there are some issues.

Tushar Pandey · Accepted Answer · 2020-04-26 07:14:46Z

1

you can use ref of your TextInput , and assign your text directly it like

refOfTextInput.setNativeProps({ text: "hello world" })

to the get the ref of TextInput you can use this approach

<TextInput ref={(ref) => { this.refOfTextInput = ref; }} />

so inside your text callback or any other component if you have ref of your TextInput you can use it like

        const onSubmitAndClear() = (text) => {
            refOfTextInput.setNativeProps({ text: "hello world" })
        }

answered Apr 26, 2020 at 7:14

Tushar Pandey

4,8875 gold badges35 silver badges53 bronze badges

Comments

Soufiane Odf · Accepted Answer · 2020-04-25 18:52:07Z

0

You can try this:

add this function:

const clear = () {
  setText('')
}

and then:

<Button onPress={() => {onSubmit(text), clear()} } title="Add Task" color='#1881e9' />

edited Apr 25, 2020 at 18:52

answered Apr 25, 2020 at 18:45

Soufiane Odf

1,1162 gold badges10 silver badges26 bronze badges

Collectives™ on Stack Overflow

Clear Text Input data once submit button clicked in react native

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related