React Native button doesn't change the state

Question

The state of my application doesn't change after I press the button specified in the code.

import React from 'react'
import { View, Text, TextInput, Button} from 'react-native'

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      text: '',
      displayText: true
    }
  }

  render() {
    return (
      <View>
      <TextInput
        onChangeText={(text) => this.setState({text})}
      />
      <Button
        onPress={(prevState) => this.setState({displayText: !prevState.displayText})}
        title="Display"
      />
      {this.state.displayText ? <Text>{this.state.text}</Text> : null}
      </View>
    )
  }

}

If the function passed to onPress is modified so that it changes displayText to false, it works as expected (it hides the text). Most likely the problem is in this portion.

<Button
        onPress={(prevState) => this.setState({displayText: !prevState.displayText})}
        title="Display"
/>

sn_92 · Accepted Answer · 2019-04-24 11:03:47Z

3

<Button
  onPress={(prevState) => this.setState({displayText: !prevState.displayText})} 
  title="Display"
/>

Is wrong, the prevState argument comes from setState as a function, but not from the onPress event :)

Should either be

<Button
  onPress={() => this.setState({displayText: !this.state.displayText})} 
  title="Display"
/>

or

<Button
  onPress={() => this.setState(prevState => {displayText: !prevState.displayText})} 
  title="Display"
/>

answered Apr 24, 2019 at 11:03

sn_92

4883 silver badges11 bronze badges

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

Comments

Ankit Dubey · Accepted Answer · 2019-04-24 11:02:53Z

0

Try this

<Button
        onPress={() => this.setState({displayText: !this.state.displayText})}
        title="Display"
/>

answered Apr 24, 2019 at 11:02

Ankit Dubey

2413 silver badges11 bronze badges

Collectives™ on Stack Overflow

React Native button doesn't change the state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related