How to use ternary operator in the render method in reactjs?

Question

I want to render two buttons based on some state condition using ternary operator just to avoid code repetition.

What I am trying to do?

I have two buttons Cancel and Start based on state value load_cancel. If Cancel button clicked load_cancel set to true and when load_cancel set to false Start button is displayed. So I have something like this in the render method

{props.item_id && this.props.load_cancel &&
    <button onClick= 
        {this.props.handle_load_start}>start</button>}
{props.item_id && !this.props.load_cancel  &&
    <button onClick={this.props.handle_load_cancel}>Cancel</button>}

How do I do the same using ternary operator?

Thanks.

Answer 1

Something like this

prop.item_id ? (
  this.props.load_cancel ? (
    <button onClick={this.props.handle_load_start}>start</button>
  ) : (
    <button onClick={this.props.handle_load_cancel}>Cancel</button>
  )
) : null

Answer 2

You can check this.props.load_cancel and if it's true render the start button otherwise render the cancel button

{props.item_id && (this.props.load_cancel? <button onClick= 
        {this.props.handle_load_start}>start</button> :
    <button onClick={this.props.handle_load_cancel}>Cancel</button>)}