Table with data array

Asked

Viewed 130 times

-2

Why the table only appears data if you set the position of the element in the array?

import React from 'react'
import Head from 'next/head'
import { Table } from 'reactstrap'
import axios from 'axios'

import Menu from '../components/Menu'

import 'bootstrap/dist/css/bootstrap.min.css'


const AreaTematica = (data) => (
    <div>
        <Head>
            <title>Áreas Temáticas</title>
            <meta name='robots' content='index, follow' />
            <meta name='description' content='Módulo de Áreas Temáticas' />
        </Head>
        <Menu />
        <Table striped>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nome</th>
                </tr>
            </thead>
            <tbody>                
                <tr>
                    <td>{data.response.areatematica.docs[0]._id}</td>
                    <td>{data.response.areatematica.docs[0].nome}</td>
                </tr>
            </tbody>
        </Table>
    </div>
)

AreaTematica.getInitialProps = async () => {
    const response = await axios.get('http://localhost:8080/areastematicas')
    return { response: response.data }
}

export default AreaTematica
node.js react next

  • I was wondering what you want to do. The answer you get from Axios is an array, and you want each item of the array to be a row in the table?

  • that’s right. each item in a row.

3 answers

0


I managed to solve. In the

return {response: response.data}

I added areastematicas.Docs, it was like this:

return {response: response.data.areastematicas.docs}

0

Looks like the data then coming in array...

that’s why you need to tell the position. If it’s a data array even what you want, you should scroll through that array ...

renderRows() {
        return array.map(d => {
            return (
                <tr key={d.id}>
                    <td>{d.id}</td>
                    <td>{user.name}</td>
                </tr>
            )
        })
    }

then you can call the method inside the tag

<tbody>
{this.renderRows()}
</tbody>

of course, you should make the necessary adaptations. instead of the array it should be that your array coming from the Axios

  • Where would I put this renderRows() to travel it?

  • <tbody> {this.renderRows()} </tbody>

  • I say this code:renderRows() {&#xA; return array.map(d => {&#xA; return (&#xA; <tr key={d.id}>&#xA; <td>{d.id}</td>&#xA; <td>{user.name}</td>&#xA; </tr>&#xA; )&#xA; })&#xA; }

  • This is a method. Create the method, put it somewhere and call in tbody. can be up in another file.

0

Browser other questions tagged node.js react next

You are not signed in. Login or sign up in order to post.