CODEWITHSUNDEEP
reactjsantd
Pallavi
Pallavi

Reputation: 77

How can we add elements in antd based on jsx conditions with array index

We have a 'flag' array like: "flag[index]=true/false (based on condition)" If we want to render a list of similar buttons based on this flag, what is the correct way to do that.

Example:

{flag[`${index}`] && (
  <Button 
    id="create" 
    onClick={() => this.onClickCreate(index)}
  > 
    Create 
  </Button>
)} 
{!flag[`${index}`]&& (
  <Button 
    id="delete" 
    onClick={() => this.onClickDelete(index)}
  >
    Delete
  </Button>
)}

Upvotes: 0

Views: 55

Answers (1)

Oro
Oro

Reputation: 2596

Your way is correct except there is no </Button> in your example. And you can do something like this with the ternary operator as well:

function Component() {
  return flag[index] ?
    (<Button id="create" onClick={() => this.onClickCreate(index)}> Create </Button>) :
    (<Button id="delete" onClick={() => this.onClickDelete(index)}> Delete </Button>)
}

Upvotes: 1

Related Questions