TypeError: patients.map is not a function React Js

Question

I am requesting some basic info from the back end using axios but for some reason unable to render the data on screen. Below is my basic App component using hooks and a map function to return a surname

import React, { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';
import { Router } from '@reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

import './custom.css'

const App = () => {

    const [patients, setPatient] = useState([])

    useEffect(() => {
        axios.get('http://localhost:5000/api/patient').then(response => {
            console.log(response.data)
            setPatient(response.data)
        })
    }, [])



    return (

        <>
            <div>
                <ul>
                    {patients.map(p => (
                        <li>{p.surname}</li>
                    ))}
                </ul>

            </div>

        </>

    )


}







export default App

When I check the dev tools I am bringing back all of data

I cannot see how my map function 'is not a function' can anyone help me out here please I get the below error message which is annoying

try add ? to your {patients?.map(p => (<li>{p.surname}</li>))} to see whether there's data or not captured on render. If nothing happen, then that means your patients array is empty — lala
– lala, Commented Dec 9, 2020 at 15:19
Hey lala sorry, I do get all the data back in the array when i put the {patients?.map} in the function — Rowandinho
– Rowandinho, Commented Dec 9, 2020 at 15:23

Abu Sufian · Accepted Answer · 2020-12-09 15:26:06Z

1

Try to use Async and Await for API call.

useEffect(function() {
   async function fetchPatients() {
      const response = await 
                       fetch('http://localhost:5000/api/patient');
      const json = await response.json();
      setPatient(json.data);
    }
   fetchPatients();
 }, []);

answered Dec 9, 2020 at 15:26

Abu Sufian

1,0641 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rowandinho Over a year ago

I think this could be an axios issue Abu Sufain, your solution solved the issue. But I want to use axios and not fetch :/

lala · Accepted Answer · 2020-12-09 16:05:09Z

1

try this fixes:-

import React, { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';
import { Router } from '@reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

import './custom.css'

const App = () => {

  const [patients, setPatient] = useState([])

  useEffect(() => {
    (async () => {
      try {
        // fetching all patirnts
        let res = await axios.get("http://localhost:5000/api/patient");
        setPatient(res.data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return (
    <>
      <div>
        <ul>
          {patients?.map(p => (
            <li>{p.surname}</li>
          ))}
        </ul>
      </div>
    </>
  )
}

export default App

edited Dec 9, 2020 at 16:05

answered Dec 9, 2020 at 15:27

lala

1,4391 gold badge15 silver badges24 bronze badges

6 Comments

Rowandinho Over a year ago

None of the axios solutions have worked so far :/

lala Over a year ago

i just edit my code. try the above updated code

Rowandinho Over a year ago

Still no joy :( It must be an issue with axios as ive never had this issue before

Sakshi Over a year ago

@Rowandinho try using fetch instead of axios then.

lala Over a year ago

just edit it again. Give it a try. If no go again, then for now, just go with fetch

|

Rowandinho · Accepted Answer · 2020-12-10 12:56:45Z

0

A working code, for anyone who stupidly wastes too much time on this problem in the future. The data was nested meaning I had to setPatient to response.data.data. I was then able to pull all required info using Axios

   useEffect(() => {
        axios.get('http://localhost:5000/api/patient').then(response => {
            
            setPatient(response.data.data)
        })
    }, [])

edited Dec 10, 2020 at 12:56

answered Dec 10, 2020 at 11:32

Rowandinho

2037 silver badges17 bronze badges

Collectives™ on Stack Overflow

TypeError: patients.map is not a function React Js

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related