CODEWITHSUNDEEP
reactjsreactstrap
new2cpp
new2cpp

Reputation: 3667

Set attribute as variable in reactstrap

In reactstrap, I saw some single word attributes, like active, flush. How to make them a variable to dynamic bind with dom?

<ListGroup>
        <ListGroupItem active>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
          </ListGroupItemText>
        </ListGroupItem>
</ListGroup>

Upvotes: 1

Views: 186

Answers (1)

Agney
Agney

Reputation: 19194

The single word attributes in JSX actually represent:

<ListGroupItem active={true}></ListGroupItem>

The true value is implicit when represented with just the keyword.

To convert that to a variable:

<ListGroupItem active={this.state.active}>
  <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
  <ListGroupItemText>
    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
  </ListGroupItemText>
</ListGroupItem>

Now, the change to state.active will also reflect the attribute value for active

Upvotes: 1

Related Questions