How to render from Json to HTML in React?

Question

JavaScript

Please tell me with a simple example how to display a block with data from it in html from external json.
Conventionally, there is json at the link https://site.com/data.json and the content in it:

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

How to output to React this in

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

Answer 1

...
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

Import the json Access
it via map
Render all the elements of the array Where
do you have a problem?