Conditional Rendering Table Rows React

Question

I have a table of many rows which I'm passing props into. If the returned props are an empty string "" I don't want to render that row

    <Table.Body>

      <Table.Row>
        <Table.Cell>Producer</Table.Cell>
        <Table.Cell>{props.producer}</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>Country</Table.Cell>
        <Table.Cell>{props.country}</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>Region</Table.Cell>
        <Table.Cell>{props.region}</Table.Cell>
      </Table.Row>

      <Table.Row>    
        <Table.Cell>Subregion</Table.Cell>
        <Table.Cell>{props.subregion}</Table.Cell>
      </Table.Row>

    </Table.Body>

and where it gets rendered:

render() {
return (
//  <Container>
 <Grid>

    {this.state.wines.length ? (
          <List>
            {this.state.wines.map(wine => (
              <Grid>
               <DataWine header={wine.Wine} producer={wine.Producer} country={wine.Country} region={wine.Region} subregion={wine.Subregion}/>

              </Grid>
            ))}

          </List>
        ) : (
          <h3>No Results to Display</h3>
        )}

So in this example, if the JSON returns "" for Subregion, I don't want the row that says Subregion: " " to render. Thanks in advance!

{props.subregions !== "" ? <your_table_row/> : null}

Sneha Bharti
– Sneha Bharti

2019-03-06 05:26:00 +00:00
Commented Mar 6, 2019 at 5:26 — Sneha Bharti
– Sneha Bharti, Commented Mar 6, 2019 at 5:26
It's unclear what you're asking for.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2019-03-06 05:26:03 +00:00
Commented Mar 6, 2019 at 5:26 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 6, 2019 at 5:26
show your full DataWine component code or render method .?

sathish kumar
– sathish kumar

2019-03-06 05:29:24 +00:00
Commented Mar 6, 2019 at 5:29 — sathish kumar
– sathish kumar, Commented Mar 6, 2019 at 5:29

Bhojendra Rauniyar · Accepted Answer · 2019-03-06 05:30:16Z

4

I'm not pretty sure what you're asking for. But I'm pretty sure you just need to use && operator like:

{
  props.region &&
  <Table.Row>
    <Table.Cell>Region</Table.Cell>
    <Table.Cell>{props.region}</Table.Cell>
  </Table.Row>
}

answered Mar 6, 2019 at 5:30

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional Rendering Table Rows React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related