Как отключить рендеринг родительского элемента, если атрибут child имеет значение true

Question

Я хочу отключить рендеринг родительского элемента TR, если атрибут третьего дочернего TD равен true.

Есть ли способ использовать троичный оператор в родительском элементе, чтобы проверить, является ли атрибут дочерних элементов истинным или ложным?

 // Setting my GET request response data to users

 componentDidUpdate() {
   axios.get('http://localhost:3000/api/users')
     .then(response => {
       this.setState({ users: response.data });
     })
     .catch(function (error) {
       console.log(error);
     })
 }

  // Mapping my data from GET request to the proper table and 
  using a ternary operator to check if GET data group is equal to 
  the current group and setting to true or false

  <tbody>
    {this.state.users.map(function (singleuser, i) {
      return [
       <tr key={i} style={{ color: '#fff' }}>
        <td>{singleuser.name}</td>
        <td>{singleuser.email}</td>
        <td selected={user.group.toString() === singleuser.group.toString()}>{singleuser.group}</td>
      </tr>
      ]
   })}
 </tbody>

Answer 1

Вы можете использовать условный рендеринг для отображения или что-то еще. Что-то вроде ...

const enabled = this.state.enabled;
{enabled ? <tr> <td>1</td><td>2</td><td>3</td></tr>:'no table row'}

Вот пример кода, который я сделал. Вы можете изменить истину / ложь, обновив состояние https://codepen.io/anon/pen/xNoEjQ

Answer 2

Вы можете просто использовать условное выражение, чтобы не отображать элемент

<tbody>
    {this.state.users.map(function (singleuser, i) {
      const shouldHide = user.group.toString() === singleuser.group.toString()
      return shouldHide
        ? null
        : <tr key={i} style={{ color: '#fff' }}>
            <td>{singleuser.name}</td>
            <td>{singleuser.email}</td>
            <td selected={shouldHide}>{singleuser.group}</td>
          </tr>
     })
   }
 </tbody>