I am rendering a page with react and react-bootstrap, with the use of <ListGroup> and <ListGroupItem>. The following is my code, and I'm trying to use bsStyle='info' when the status is not '1', and leave it blank when status is '1'.

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

It rendered properly but keeps getting the following warning due to validation of bsStyle:

Warning: Failed prop type: Invalid prop `bsStyle` of value `` supplied to `ListGroupItem`, expected one of ["success","warning","danger","info"].

There is a workaround to escape the validation by setting bsStyle={null}. However I can't get it works within the ternary expression. The following code will make it a string bsStyle='{null}'.

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('{null}')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

What is the proper way to pass {null} without making it a string?

EDITED: Supposed to be '{null}' and not '{null' up there.

I am rendering a page with react and react-bootstrap, with the use of <ListGroup> and <ListGroupItem>. The following is my code, and I'm trying to use bsStyle='info' when the status is not '1', and leave it blank when status is '1'.

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

It rendered properly but keeps getting the following warning due to validation of bsStyle:

Warning: Failed prop type: Invalid prop `bsStyle` of value `` supplied to `ListGroupItem`, expected one of ["success","warning","danger","info"].

There is a workaround to escape the validation by setting bsStyle={null}. However I can't get it works within the ternary expression. The following code will make it a string bsStyle='{null}'.

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('{null}')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

What is the proper way to pass {null} without making it a string?

EDITED: Supposed to be '{null}' and not '{null' up there.

• javascript
• reactjs
• react-bootstrap

Share Improve this question Follow edited Jul 3, 2017 at 2:36 Yen Sheng asked Jul 1, 2017 at 16:58 Yen ShengYen Sheng 72511 gold badge1414 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Your ternary operator's second operand is off:

('{null}')

That evaluates to literally "{null}". Try this:

bsStyle={table.status !== '1' ? 'info' : null}

Just use null plainly, do not wrap it in quotes. Here's a JSFiddle example.

You probably want to ommit whole bsStyle attribute in case status is not different from 1

<ListGroupItem
   key={`table.${table.id}`}
   header=(table.name)
   {...( table.status !== '1' ? {bsStyle:'info'} : {} )}
  >