react native can not use boolean value in component state

Question

I'm using a simple demo to learn react native, I found a strange thing.

This is my code:

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {success: false}
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js.
          {this.state.success}        //this line can not be shown
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

I use set a state in the constructor() but can not access it in render(), and when I set the success value to a string or int, it will display.

Is anything wrong in my code ? why can not I use boolean ?

By default, boolean values are not shown in React. Why do you need to display a boolean value? — Hemerson Carlin
– Hemerson Carlin, Commented Oct 19, 2017 at 11:48
undefined or null won't display either, btw. You can use this property for conditional rendering. — JulienD
– JulienD, Commented Oct 19, 2017 at 11:51
I think it should be seen as a string false as @MikhailShabrikov said. — L. Swifter
– L. Swifter, Commented Oct 19, 2017 at 11:52

Chris · Accepted Answer · 2017-10-19 12:25:23Z

You are accessing it alright, but nothing is shown because it is a boolean, not a string or number.

If you want to display a literal "true" or "false" you should convert it to a string first with toString():

<Text style={styles.instructions}>
  To get started, edit App.js.
  {this.state.success.toString()}
</Text>

If I remember correctly, I read that they decided not to render boolean values in order to support more flexible in-line conditionals.

Short-circuit evaluation is one such example:

{!this.state.success && <p>Whoops, something went wrong!</p>}

If success is true, the message above won't be rendered. In vanilla JS however, this would return the string literal "false" - not ideal when, like in the example, you want to either render something or nothing.

Imagine how annoying it would be if you rendered the return value of some object method (i.e indexOf(), map(), etc) and react rendered the string literal for undefined, null, and other falsy values. This doesn't happen; instead, React renders nothing.

Some more info from the official documentation here:

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

Collectives™ on Stack Overflow

react native can not use boolean value in component state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related