Map array dont show in table

Question

I need map a array inside my page, and show the result in a table, but the content don't show up when I compiled the page.

Can anyone help me?

When I print in console the content of a var, this is here. But the info don't show up in the page

import Layout, { siteTitle } from '../components/layout'

const fetch = require('node-fetch');


export default function Home({ devices }) {
  return (
    <Layout >
      {devices.map((device) => (
        <table>
          <thead>
            <th>
                {device.localname} / {device.localIP}  
            </th>
          </thead>  
          {console.log('1')}
          <tbody>
            <tr>
              <td>
                {device.IPaddress[0][3].value} // I put this to test, and this works fine
              </td>
            </tr>
            {device.IPaddress.map((port) =>{
              <tr>
                <td>
                  {console.log(port[3].value), port[3].value} // here I need to work, I want to put all results of port in a TD tag, the console.log shows up the info, but the page not.
                </td>
              </tr>
            })}
          </tbody>
        </table>
      ))}
    </Layout >
      
  )
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:3000')
  const devices = await res.json()

  return {
    props: {
      devices
    }
  }
}

Can you provide a copy of the JSON response or data you are trying to map the table to? — Kelvin, Aug 25 '20 at 20:51
Thanks @evgenifotia, this works perfectly, can you explaim the concept of this change? — Maicon Santos, Aug 26 '20 at 11:02
@KelvinThanks for the help, the answer posted by evgenifotia works fine. But for information the json is in this format: { localname, localIP, [{ obeject, object }] } — Maicon Santos, Aug 26 '20 at 11:03

score 0 · Answer 1 · answered Aug 26 '20 at 11:06

As commented by @evgenifotia, change the ( for { inside the second array map works fine.

here the final function:

export default function Home({ devices }) {
  return (
    <Layout >
      {devices.map((device) => (
          <table>  
            {console.log('1')}
            <tbody>
              <tr>
                <th>
                    {device.localname} / {device.localIP}  
                </th>
              </tr>  
              {device.IPaddress.map(port =>(
                <tr>
                  <td>
                    {console.log(port[3].value), port[3].value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
      ))}
    </Layout >
      
  )
}

Map array dont show in table

1 Answers1