React Native - TextInput - How to use value & defaultValue together

Question

I got the following Component and I want to init TextInput with defaultValue and then when user type update the value of it.

How do I do that?

Here what I've tried - but this way TextInput is always empty on initialization.

class Note extends Component {
    state = {
        text: ""
    };

    render() {
        const {onChange} = this.props;

        return (
                <TextInput
                    onChangeText={(text) => {
                         this.setState({text}); 
                         onChange(text);
                    }
                    value={this.state.text}
                    defaultValue={this.props.text}
                />
        );
    } }

"react": "^16.4.1"
"react-native": "^0.55.4",

@chenop i am making a answer for make better code formatting — anil sidhu
– anil sidhu, Commented Aug 10, 2018 at 8:31

chenop · Accepted Answer · 2019-01-29 12:47:21Z

23

Finally solved it,

The key is the following - "value" has preceding over "defaultValue" unless "value" is undefined!

So, Init this.state.text = undefined, this way defaultValue can be initialized with this.props.text.

class Note extends Component {
    state = {
        text: undefined
    };

    render() {
        const {onChange} = this.props;

        return (
            <View>
                <TextInput
                    onChangeText={(text) => {
                         this.setState({text}); 
                         onChange(text);
                    }
                    value={this.state.text}
                    defaultValue={this.props.text}
                />
            </View>
        );
    }
}

I found this a bit more clean than @anilSidhu solution.

edited Jan 29, 2019 at 12:47

answered Aug 10, 2018 at 9:34

chenop

5,2234 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

E Pierre Over a year ago

definitely best answer

Gufran Khurshid Over a year ago

I faced the issue setting integer value as default. value.toString() solved my problem.

Riddhi · Accepted Answer · 2018-08-10 07:18:20Z

3

You can set default value in state itself like following:

class Note extends Component {
    state = {
        text: this.props.text
    };

    render() {
        const {onChange} = this.props;

        return (
                <TextInput
                    onChangeText={(text) => {
                         this.setState({text}); 
                         onChange(text);
                    }
                    value={this.state.text}
                />
        );
    } }

answered Aug 10, 2018 at 7:18

Riddhi

7871 gold badge14 silver badges32 bronze badges

7 Comments

Riddhi Over a year ago

please accept my answer if it become useful to you.

chenop Over a year ago

Thanks for answering But I think that's not good enough. This way the props.text will be used only once (when constructor will be invoked) I want the props.text to be used every time it is changed.

chenop Over a year ago

Also please note that if Note is encapsulated by another component which is connected to Redux (my case but I think its the common case) and the encapsulated Component init the text attribute which is passed to Note - than this.props.text will be initialized in the first time with undefined.

Riddhi Over a year ago

yes you are right as I think at first time render pass blank value to TextInput's value and then it will take this.props.text. may be this is the reason.

chenop Over a year ago

thanks for you time man - The first time this.props.text is undefined. the encapsulated component use mapStateToProps to init text but it init text only after it was pass (as undefined) to Note

|

anil sidhu · Accepted Answer · 2018-08-10 08:37:43Z

3

class Note extends Component {
  state = {
    text: undefined
  };
  componentDidMount() {
    this.setState({ text: this.props.text })
  }
  render() {

    return (
      <TextInput
        onChange={(text) => {
          this.setState({ text: text.target.value });

        }}
        value={this.state.text}
      />
    );
  }
}

It should work for you and if you are still facing the issue let me know please

answered Aug 10, 2018 at 8:37

anil sidhu

9631 gold badge9 silver badges24 bronze badges

Comments

Erfin Badriansyah · Accepted Answer · 2022-10-07 13:09:13Z

3

For someone having trouble with this problem. I've experienced it. i expect my number Value to be displayed on Textinput. But placeholders keep showing.

The solution is your Value must be String. So i convert my Number to String use toString() method.

Hope this helps.

answered Oct 7, 2022 at 13:09

Erfin Badriansyah

391 bronze badge

2 Comments

Joshua Pinter Over a year ago

Holy crap. 2022 and this is what we're dealing with. Thanks for this.

Kishan Somaiya Over a year ago

Thanks, Mate, for this, and people say react native is the best.

lubegasimon · Accepted Answer · 2020-04-11 12:55:17Z

2

Basically, when you're having both value and defaultValue props, always value prop will take precedence and thus defaultValue won't be reflected.

answered Apr 11, 2020 at 12:55

lubegasimon

311 silver badge8 bronze badges

Comments

Vincent Doba · Accepted Answer · 2022-01-26 10:13:55Z

1

Sometimes if you are showing number type to default value it doesn't work. you must convert to string type as follows:

defaultValue(String(this.props.text)}

edited Jan 26, 2022 at 10:13

Vincent Doba

5,1683 gold badges28 silver badges49 bronze badges

answered Jan 24, 2022 at 7:24

Emachalan Subramaniyan

111 bronze badge

Collectives™ on Stack Overflow

React Native - TextInput - How to use value & defaultValue together

6 Answers 6

2 Comments

7 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

7 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related