Novato de React/JavaScript aquí. Pasé todo el día cambiando mi llamada de API para que muestre un estado de carga para que la página no muestre datos de API que aún no se han llamado, pero todo lo que obtengo es que .map() no es una función.
¿Alguien podría darme algunos consejos por favor?
const Loader = () => ( <div class="divLoader"> <svg class="svgLoader" viewBox="0 0 100 100" width="10em" height="10em"> //Loader animation </svg> </div> ); class Sonos extends React.Component { constructor(props) { super(props); this.state = { loading: true, data: [], }; } //API is called componentDidMount() { axios.get("API_KEY").then((res) => { const data = res.data; this.setState({ data: [], loading: false }); console.log(data); }); } render() { return ( <div> {this.state.loading ? <Loader /> : null} <table border="1"> <parent> <div className=" text-gray-700 items-center text-3xl "> <div className="bg-gradient-to-r from-green-400 to-blue-500 min-w-full min-h-full"> <div className="text-4xl font-semibold"> {this.state.data.map((n) =>{ return ( <h1>pleasse</h1> ) })} </div> </div> </div> </parent> </table> </div> ); } } export { Sonos }; render(){ if(this.state.loading){ return <Loader /> } // return table if loading is false // handling error goes with the same logic // table will only render if loading is false return ( <table> </table> ) }