conditional props react

JavaScript
render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}<img 
  src={this.state.photo} 
  alt="" 
  style={ isLoggedIn ? { display:'block'} : {display : 'none'} }  
/>

// or

<img
  src={this.state.photo} 
  alt=""
  style={ { display: isLoggedIn ? 'block' : 'none' } }  
/>render() {
  return (
    <a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a>
  )
}var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}// single prop
propName={ condition ? something : somethingElse }
propName={ condition && something }
// multiple props
{ ...( condition ? { ...setOfProps } : { ...setOfOtherProps })}
{ ...( condition && { ...setOfProps })}
Source

Also in JavaScript: