javascript - how to render disabled button by if statement?

I want to disable a button in a react ponent when a state of checkedIds is empty, the code to disable button is just like this:

<Button disabled> disabled </Button>

But when I try this it don't work

<Button {if(this.state.checkedIds.length===0) {
    return disabled;
  }}>
      Delete Selected 
  </Button>

Help?

I want to disable a button in a react ponent when a state of checkedIds is empty, the code to disable button is just like this:

<Button disabled> disabled </Button>

But when I try this it don't work

<Button {if(this.state.checkedIds.length===0) {
    return disabled;
  }}>
      Delete Selected 
  </Button>

Help?

Share Improve this question asked Jun 7, 2017 at 16:15 gpbaculio 5,96814 gold badges68 silver badges112 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

If-else doesn't directly work like that, you should make use of ternary operator and return a boolean value like

<Button disabled={(this.state.checkedIds.length == 0? true: false)}>
      Delete Selected 
  </Button>

This should work.

<Button disabled={this.state.checkedIds.length===0} >
  Delete Selected 
</Button>