Когда Вы перебираете 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>
)
)}
currencies
сdata.currencies
, но в data у вас нет поляcurrencies
. В самом компоненте вы обращаетесь к пропсуdistance
, но у вас нет такого пропса, т.к. вы передаете данные через пропсcurrencies
.