Как вывести информацию о конкретном id?

Question

[Rebuslol]

[{"id":1,"name":"Бомбический","speed":80,"price":1070,"channels_count":38,"hd_channels_count":28},{"id":2,"name":"Стартовый","speed":60,"price":390,"channels_count":39,"hd_channels_count":26},{"id":3,"name":"XXL Улётный","speed":90,"price":450,"channels_count":118,"hd_channels_count":8},{"id":4,"name":"Эксклюзивный","speed":60,"price":900,"channels_count":107,"hd_channels_count":9},{"id":5,"name":"Объединяй! Два интернета за полцены!","speed":30,"price":670,"channels_count":113,"hd_channels_count":18},{"id":6,"name":"Улётный","speed":70,"price":380,"channels_count":101,"hd_channels_count":9},{"id":7,"name":"Объединяй! Эконом","speed":100,"price":640,"channels_count":131,"hd_channels_count":12},{"id":8,"name":"ФИТ Интернет","speed":50,"price":250,"channels_count":84,"hd_channels_count":14},{"id":9,"name":"Объединяй! Хит","speed":10,"price":770,"channels_count":124,"hd_channels_count":14}]

Из этого нужно вывести информацию по конкретному айди, чтобы добавить тарифы отдельно. Пока получается вывести только полностью name,price,но так не нужно

const api = axios.create({
        baseURL: `https://tarifnik.ru/rabota/api/data_controller`
})
class App extends Component {

        state = {
                rates: []
        }

        constructor() {
                super()
                api.get().then(res => {
                this.setState({ rates: res.data})
                })
        }
        render() {
                return(
                        <div>
                                <div> Скорость
                                <a>
                                { this.state.rates.map(rates => <h2 key={rates.id}>{rates.name}</h2>)}
                                </a>
                                </div>

Answer 1

[Lynatik001]

попробуй юзать

const result = words.filter(rates => rates.id == id);

ну и потом что хочешь делать далее

Comments

[Rebuslol]

А куда ее вставить?) и как потом вывести конкретный id? спасибо

[Timur Kostenko]

Только используй строгое равенство ===

[Lynatik001]

Rebuslol, заместь

{ this.state.rates.map(rates => <h2 key={rates.id}>{rates.name}</h2>)}

вот так

{ this.state.rates.filter(rates => rates.id === id).map(rates => <h2 key={rates.id}>{rates.name}</h2>)}

ну или уже без map выводить. так как уже остался то 1 елемент.

[Rebuslol]

Lynatik001, 'id' is not defined no-undef ошибку выдает

[Lynatik001]

Rebuslol, я немогу подсказать человеку, что сам этого не хочет. тут написаннго что не находит свойство айди.
Посмотрите что после фильтра в this.state.rates остается, может я что неправильно составил, а может еще что.
Посмотрев внутрености this.state.rates - узнаете, к чему там можно обратится.....

[Rebuslol]

Lynatik001, разобрался,спасибо

[0xD34F]

Раз уж вопрос стоит про "конкретный" - правильнее было бы вместо filter использовать find:

const rate = this.state.rates.find(n => n.id === конкретныйId);

{rate && <div>{отображаем содержимое rate}</div>}