Ermolov
@Ermolov
Начинающий Full Stack разработчик

Как сделать рендеринг из Json в HTML на React?

Подскажите пожалуйста простым примером, как из внешнего json вывести блок с данными из него в html.
Условно есть json по ссылке https://site.com/data.json и в нем содержимое:
[ {
        "id": 1569,
        "link": "https://site.com"
    } ]


Как вывести на React это в
<div>
<span>Здесь ID</span>
<span>Здесь значение link</span>
</div>
  • Вопрос задан
  • 523 просмотра
Решения вопроса 1
@lnked
...
state = {
    json: [],
}
...
componentDidMount() {
    fetch('https://site.com/data.json')
        .then(response => response.json())
        .then(json => this.setState({ json }));
}
...
render() {
    const { json } = this.state;

    return (
        {json.map(({ id, link })) => (
            <div>
                <span>{id}</span>
                <span>{link}</span>
            </div>
        )}
    )
}
...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@McBernar
Импортируете json
Обращаетесь к нему через map
Рендерите все элемены массива

В каком пункте у вас проблема?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы