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

Question

[Влад Ермолов]

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

[ {
        "id": 1569,
        "link": "https://site.com"
    } ]

Как вывести на React это в

<div>
<span>Здесь ID</span>
<span>Здесь значение link</span>
</div>

Answer 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>
        )}
    )
}
...

Answer 2

[McBernar]

Импортируете json
Обращаетесь к нему через map
Рендерите все элемены массива

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

Comments

[lnked]

в этом варианте импорт не подойдет