Necesito ayuda para representar los encabezados de la tabla y la información analizada de una API solo cuando se presiona el botón. Además de actualizar la página cuando se presiona un botón diferente para que la matriz de más de 100 objetos no se apilen unos encima de otros. Estoy usando React para escribir este código. Hay más en este código, pero este es un fragmento y quiero aplicarlo a los otros botones (3).
También estoy pensando en crear un nuevo archivo para cada llamada API para obtener su información y luego importarlos a este archivo para que se promulguen cuando se presione el botón.
import { useState } from 'react'; export default function Markets() { const API_KEY = process.env.REACT_APP_MS_API_KEY; const [dataEndOfDay, setEndOfDay] = useState(''); async function getEndOfDay() { try { const response = await axios.get( `${BASE_URL}eod?access_key=${API_KEY}&symbols=AAPL` ); console.log(response.data.data); setEndOfDay( response.data.data.map((row) => { return ( <tr> <td>{row.date}</td> <td>{row.symbol}</td> <td>${row.open}</td> <td>${row.close}</td> </tr> ); }) ); } catch (error) { console.error(error); } } return ( <div className="market-button"> <button onClick={getEndOfDay}>Get End of Day Report</button> <table> <tr> <th>Date</th> <th>Symbol</th> <th>Open</th> <th>Close</th> </tr> {dataEndOfDay} </table> }Solo necesita envolver su tabla dentro de una declaración if. Pero también elimine la cadena vacía de su estado y simplemente déjela vacía o configúrela como nula.
const [dataEndOfDay, setEndOfDay] = useState(); return ( <div className="market-button"> <button onClick={getEndOfDay}>Get End of Day Report</button> { dataEndOfDay && <table> <tr> <th>Date</th> <th>Symbol</th> <th>Open</th> <th>Close</th> </tr> {dataEndOfDay} </table> } <div> )Pero en otra nota, su código no es el mejor para el rendimiento y recomendaría refactorizarlo. No debe guardar los datos html para sus filas en el estado, sino solo los datos de la API y luego simplemente repetirlos en el renderizado.
import { useState } from 'react'; export default function Markets() { const API_KEY = process.env.REACT_APP_MS_API_KEY; const [dataEndOfDay, setEndOfDay] = useState(); async function getEndOfDay() { try { const response = await axios.get(`${BASE_URL}eod?access_key=${API_KEY}&symbols=AAPL`); console.log(response.data.data); setEndOfDay(response.data.data); } catch (error) { console.error(error); } } return ( <div className="market-button"> <button onClick={getEndOfDay}>Get End of Day Report</button> { dataEndOfDay && <table> <tr> <th>Date</th> <th>Symbol</th> <th>Open</th> <th>Close</th> </tr> { dataEndOfDay.map(row => { return ( <tr> <td>{row.date}</td> <td>{row.symbol}</td> <td>${row.open}</td> <td>${row.close}</td> </tr> ); } } </table> } </div> ); }