jsx if else shorthand to hide element

Question

I can do

<p>Company: {{this.state.user.company}}</p>

but sometime company has no value. So how should I hide the entire

if the property of company is null?

I tried

<p>({this.state.user.company} ? 'Company: ' + {this.state.user.company} : '')</p>

But it doesn't work.

Answer 1

Alternative syntax to Ori Drori's answer (I find this a bit easier to read):

render() {
  return (
    {this.state.user.company ? <p>Company: {this.state.user.company}</p> : null}
  )
}

Answer 2

React doesn't render falsy values, so you can use short-circuit evaluation. If this.state.user.company is null, it will be ignored by react. If it's truthy, react will render the element after &&.

render() {
    return (
        <div>
        {this.state.user.company &&
            <p>Company: {this.state.user.company}</p>
        }
        </div>
    );
}