0
259
Vistas¿Cómo imprimir una matriz de un objeto en reaccionar?
const api = axios.create({ baseURL: 'https://iotserver-arha83.herokuapp.com/api/customers/' }) class App extends Component { state = { courses:[] } constructor(){ super(); api.get('/').then(res =>{ this.setState({courses: res.data}) }) } render(){return ( <div className="App"> <header className="App-header"> <table> <tr><td>pk</td>{this.state.courses.map(course=><td>{course.pk}</td>)}</tr> <tr><td>title</td>{this.state.courses.map(course=><td>{course.title}</td>)}</tr> <tr><td>gateway</td>{this.state.courses.map(course=><td>{course.gateway}</td>)}</tr> </table> </header> </div> );} } export default App; [ { "pk": 1, "title": "first", "gateways": [1] }, { "pk": 2, "title": "second", "gateways": [2] }, { "pk": 5, "title": "test", "gateways": [] }, { "pk": 6, "title": "test", "gateways": [] } ]este es mi código y quiero imprimir todos los elementos de mi sitio web, pero no puedo imprimir las puertas de enlace porque es una matriz. Traté de cambiar la puerta de enlace en una cadena para que pudiera imprimirse, pero no funcionó. ¿Alguna idea...? nota: este código debe imprimir todo en la lista superior
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Debe iterar sobre la matriz solo una vez usando el método map() y representar un tr para cada elemento.
<table> <tr> <th>pk</th> <th>title</th> <th>gateway</th> </tr> {courses.map((course) => ( <tr key={course.pk}> <td>{course.pk}</td> <td>{course.title}</td> <td>{course.gateways.join(",")}</td> </tr> ))} </table> Las gateways de enlace de propiedades también son una matriz que también puede map , sin embargo, dado que solo desea representar valores, puede usar el método join(",") en su lugar.
En una nota al margen, es mejor comenzar a usar componentes funcionales.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta