React: Can I check if a state exists before rendering it

Question

I'm new to React and I've made a navbar that displays the users name user

<NavItem eventKey={4} href="#">{this.state.name}</NavItem>

but the problem is if the user is not signed in, I get an error due to this.state.name being undefined. Is there some way I can check if this.state.name is defined before rendering it as part of the navbar or is there a better way to get rid of this error?

Answer 1

Sure, use a ternary:

render() {
  return (
    this.state.name ? <NavItem>{this.state.name}</NavItem> : null
  );
}

or even shorter

render() {
  return (
    this.state.name && <NavItem>{this.state.name}</NavItem>
  );
}

Answer 2

Sure you can:

let userNavItem
if (this.state.name !== undefined) {
  userNavItem = <NavItem eventKey={4} href="#">{this.state.name}</NavItem>
} else {
  userNavItem = null
}

Now you can use userNavItem on your navbar component, and it will render only if this.state.name is defined.

Answer 3

In React, you can check if a state exists before push

    checkedProduct=(prop)=>{
  var checkIfExist = this.state.checkedProduct.filter((product)=>{
    return product===prop
  })
  if(checkIfExist.length>0){
    var checkIfExist = this.state.checkedProduct.filter((product)=>{
      return product!==prop
    })
    this.setState({ checkedProduct:checkIfExist })

  }else{
    this.setState({ checkedProduct: this.state.checkedProduct.concat(prop) })
  }
}