Question 267863 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Map a React Hook is not working on NextJS using TypeScript

I am using NextJS to display data obtained from a DB in a table, once I fetch the data I want to use the map function to create the table row and then insert it on the table

import React, {useEffect, useState} from 'react'
import { Container, Table } from 'react-bootstrap'
import axios from 'axios'

export default function index() {

  const [object, setObject] = useState({
    type: '',
    date: '',
    user: 0
  })
  const fetchData = async () =>{
    const results = await axios.get(`my api url`)
    setObject(results.data.result)
  }

  useEffect(() =>{
    fetchData()
  },[])

  if(object.user != 0){
    const objectRow = object.map(
      (index: any) =>{
          return(
              <tr>
                  <td>{index.type}</td>
                  <td>{index.date}</td>
                  <td>{index.user}</td>
              </tr>
          )
      }
    )*/
  }

  return (
    <Container>
      <Table bordered hover >
        <thead>
          <tr>
            <th>Type</th>
            <th>Date</th>
            <th>User/th>
          </tr>
        </thead>
        <tbody>
          {objectRow}
        </tbody>
      </Table>
    </Container>
  )
}

I’m getting an error Property 'map' does not exist on type followed by the properties of object.

Is my approach worng? How can I map the data?

Tags:

2

Answers


  1. 0

    object isn’t an array. Use

    const [object, setObject] = useState([{
  type: '',
  date: '',
  user: 0
}])

    to make it an array.

    And make sure that the result of the API call is an array.

    Login or Signup to reply.
  2. 0

    Hello
    You’r provided code have some errors i am providing a possible better version of your code

    import * as  React from 'react'
import { Container, Table } from 'react-bootstrap'
import axios from 'axios'

interface ResponseDataType {
  type: string;
  date: string;
  user: string;
}


export const IndexPage: React.FC = () => {

const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [responseData, setresponseData] = React.useState<ResponseDataType[] 
| null>(null);

const fetchData = async () => {
  try {
    setIsLoading(true);
    const response = await axios.get(`my api url`);
    setresponseData(response.data.result);
  } 
  catch (error) {
    setIsLoading(false);
    /* 
       it's on you how you want to show errors
    */
    console.log(error);
    } 
    finally {
      setIsLoading(false);
    }
}

React.useEffect(() => {
    fetchData();
}, []);

/*
    you can return you'r custom loading component
*/
if (isLoading) {
    return <h1>Loading...</h1>
}

return (
    <Container>
        <Table
            bordered
            hover
        >
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Date</th>
                    <th>User</th>
                </tr>
            </thead>
            <tbody>
                {!isLoading && responseData && (
                        responseData.map((item: ResponseDataType) => (
                            <tr>
                                <td>{item.type}</td>
                                <td>{item.date}</td>
                                <td>{item.user}</td>
                            </tr>
                        ))
                    )}
            </tbody>
        </Table>
    </Container>
);

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search