How do I use the return value of a function in React? [duplicate]

I have a basic React application. I want to show a list of links, and in the right column I want to show their status.

I have a .json file that has my urls:

[
    {
        "name": "Google",
        "url": "www.google.com"
    },
    {
        "name": "Bing",
        "url": "www.bing.com"
    },
    etc.
]

and I have a basic React component that reads it, builds a table with two rows:

• <a href=url>name</a>
• the status of this url

Here is the code:

import React from 'react'
import Table from 'react-bootstrap/Table'
import data from './data/urls.json'

function returnStatus (url) {
    fetch(url)
        .then(function(response) {
            return response.status
         })
        .catch(err => {
            console.log('Error: ',err)
        })
}

function Urls() {
    const urls = data.map(url => (
        <tr>
            <td>
                <a href={url.url} target='_blank'>{url.name}</a>
            </td>
            <td>{returnStatus(url.url)}</td>  ----> THIS IS THE LINE THAT DOESN'T WORK
        </tr>
    ))

    return (
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>{urls}</tbody>
            </Table>
        </div>
    )
}

export default Urls

I know well Java and Python, and IMO it should work. But it doesn’t! Can you guys please help me 🙂