Tengo una aplicación React básica. Quiero mostrar una lista de enlaces, y en la columna de la derecha quiero mostrar su estado.

Tengo un archivo .json que tiene mis direcciones URL:

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

y tengo un componente React básico que lo lee, crea una tabla con dos filas:

• <a href=url>name</a>
• el estado de esta url

Aquí está el código:

 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

Conozco bien Java y Python, y en mi opinión debería funcionar. ¡Pero no es así! ¿Pueden ayudarme por favor? :)