ReactJS API. Вытащить из json блок значении

228

31 июля 2018, 14:10

Хочу вытащить данные эти в li, которых выделил в красном квадрате (см.картинку-1, ниже представлен код):

import React from 'react'
import axios from 'axios'
export default class Bitcoin extends React.Component {
state = {
    bitcoins: []
}
componentDidMount() {
    axios.get(`https://api.coinmarketcap.com/v1/ticker/?limit=0`)
        .then(res => {
            const bitcoins = res.data
            this.setState({ bitcoins })
        })
}
bitcoinView() {
    var x = document.getElementById("mySelect").value
    document.getElementById("conclusion").innerHTML = "You selected: " + x
}
render() {
    return(
        <div>
            {   <select id="mySelect" onChange={this.bitcoinView}>
                    { this.state.bitcoins.map((bitcoin) => (
                        <option value={bitcoin.symbol}> {bitcoin.name} - {bitcoin.price_usd}$  </option> ) )
                    }
                </select>
            }
            <p id="conclusion"></p>
        </div>
    )
}

}

Картинка-1:

P.S: Вывод хочу чтобы был таков (см.картинку-2), плюс еще остальные данные как выше писал и показал в картинке-1: в "option" выбираю определенный биткоин, а там именно его блока данные выходят в "li"

Пример:

Картинка-2

Answer 1

React использует свой ShadowDom и только при его изменении(с помощью setState()) вносит их в реальный DOM. Когда вы мутируете DOM (document.getElementById...) напрямую, реакт не будет знать об этом, и его дальнейшее поведение будет не предсказуемым. Есть практика сохранения ссылки на dom node через свойство ref, но это является "Bad practice", и нужно стараться этого избегать.

В Вашем случае можно просто завести новое поле в стейте, которое будет хранить номер выделенной опции

state = {
    bitcoins: [],
    bitcoinSelected: 0
}

А в функции bitcoinView просто его менять(e.id не точное значение, нужно прокинуть id в функцию, но думаю суть понятна)

bitcoinView(e) {
    this.setState({
       ...this.state,
       bitcoinSelected: e.id
    })
}

И ренедерить соответственно(и небольшая проверка, если наш массив с данными еще не пришел - ничего не отображать)

<p id="conclusion">
   {this.state.bitcoins && this.state.bitcoins[this.state.bitcoinSelected].symbol}
</p>

PS не забывайте давать уникальные ключи динамически генерируемым элементам

{ this.state.bitcoins.map((bitcoin, i) => (
                        <option key={i} value={bitcoin.symbol}> {bitcoin.name} - {bitcoin.price_usd}$  </option> ) )
                    }