React . не получается отобразить выборочно элементы из списка с флагом true

Question

подскажите правильный способ. пробую так:

<tr className={s.area} >
                        {this.props.distance.map(n => (
                            this.state.isActive === true &&
                            <td key={n.id} >
                                <p>
                                    <label>{n.name}</label>
                                    <input type="number" data-currency={n.name}
                                        value={currency === n.name ? value : (value / rate * n.rate).toFixed(2)}
                                        onChange={this.onChange} ></input>
                                </p>
                            </td>
                        ))}
                    </tr>

https://codesandbox.io/s/goofy-herschel-4gwhil?file=/src/table.jsx:176-184

Answer 1

Когда Вы перебираете mapом, Вы проверяете

 this.state.isActive === true

но в this.state.isActive у Вас undefined, так как Вы пытаетесь записать туда

isActive: this.props.distance.isActive

В этот момент у Вас в this.props.distance лежит массив и Вы не можете обратится к полю isActive

Поэтому элементы у Вас не отображаются так как на проверке

this.props.distance.map((n) => this.state.isActive === true && (здесь JSX верстка)

первое условие дает false и логическое && вместе с mapом возвращают false

В state вам нужно писать:

 this.state = {
      currency: this.props.distance[0].name,
      value: 0,
      id: this.props.distance[0].id,
      mesurSyst: "",
      isActive: this.props.distance[0].isActive
    };

Если Вы хотите получать корректные id и isActive

Касательно вывода элементов с флагом true в методе map вам нужно проверять n.isActive === true

{this.props.distance.map(
              (n) =>
                n.isActive === true && (
                  <td key={n.id}>
                    <p>
                      <label>{n.name}</label>
                      <input
                        type="number"
                        data-currency={n.name}
                        value={
                          currency === n.name
                            ? value
                            : ((value / rate) * n.rate).toFixed(2)
                        }
                        onChange={this.onChange}
                      ></input>
                    </p>
                  </td>
                )
            )}

Потому, что если Вы будете проверять this.state.isActive === true то в this.state.isActive у Вас будет лежать один флаг одного элемента массива, флаги остальных элементов игнорируются

Можно также использовать map совместно с filter тогда возможно будет более очевидно и читаемо (P.S. по желанию =) )

{this.props.distance
              .filter(n => n.isActive)
              .map(
                (n) =>
                  (
                    <td key={n.id}>
                      <p>
                        <label>{n.name}</label>
                        <input
                          type="number"
                          data-currency={n.name}
                          value={
                            currency === n.name
                              ? value
                              : ((value / rate) * n.rate).toFixed(2)
                          }
                          onChange={this.onChange}
                        ></input>
                      </p>
                    </td>
                  )
            )}

БЛОГ НА HUSL

React . не получается отобразить выборочно элементы из списка с флагом true

Ответы (1 шт):