TypeError: this.state.patients.map is not a function

Question

i am new in react js,and i am learning to create a React application and I got a problem with mapping function:

Here's my request and how I am attempting to render the data:

class Patients extends Component {
  constructor(props) {
    super(props)
    this.state = {
      patients: []
    }
  }
  componentDidMount() {
    api.getPatients()
      .then( patients => {
        console.log( patients)
        this.setState({
          patients:  patients
        })
      })
      .catch(err => console.log(err))
  }
  render() {                
    return (
      <div className=" Patientss">
        <h2>List of Patient</h2>
        {this.state.patients.map((c, i) => <li key={i}>{c.name}</li>)}
      </div>
    );
  }
}

export default Patients;

here my api calling

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:3000/patient',
});

const errHandler = err => {
  console.error(err);
  throw err;
};

export default {
    service: service,
    
    getPatients() {
      return service
        .get('/')
        .then(res => res.data)
        .catch(errHandler);
    },
    }

and I get the following error: TypeError: this.state.patients.map is not a function

i've try to use slice aswell but it didnt work, anyone know whats wrong with my code?`

Are you sure you have data inside server response? Can you show us what this console.log( patients) give? — Rahmat Aligos, Jul 26 '18 at 08:56
`{…}` `count: 24` `patient: Array(24) [ {…}, {…}, {…}, … ]` `: Object { … }` — Ria Anggraini, Jul 26 '18 at 08:57
@RiaAnggraini its an object, use `patients.patient` in setState. — Mayank Shukla, Jul 26 '18 at 08:59

AKX · Accepted Answer · 2018-07-26T09:00:11.990

3

Based on the symptoms (heh), the patients object you get in api.getPatients() isn't an array.

console.log() it to see what it actually is.

EDIT: Based on the comments, the patients object looks like

{
  count: 24,
  patient: [...],
}

so the this.setState() call needs to be

this.setState({patients: patients.patient})

edited Jul 26 '18 at 09:00

answered Jul 26 '18 at 08:51

AKX

152,115
15
115
172

here the console result `{…}` `count: 24` `patient: Array(24) [ {…}, {…}, {…}, … ]` `: Object { … }` – Ria Anggraini Jul 26 '18 at 08:58
@RiaAnggraini Okay. Updated my answer with a solution based on that. – AKX Jul 26 '18 at 09:00
its works, thankyou a lot ,i ve been lookin for the problem since this morning , thanks :) – Ria Anggraini Jul 26 '18 at 09:05

Archit Gupta · Answer 2 · 2018-07-26T09:48:42.587

You can also do something like this as an conditional rendering. It will check that if this.state.patient exists then only it will go ahead and call this.state.patients.map function. It will also ensure that you don't receive any errors later on due to bad responses.

I updated your Patients Code example.

class Patients extends Component {
  constructor(props) {
    super(props)
    this.state = {
      patients: []
    }
  }
  componentDidMount() {
    api.getPatients()
      .then( patients => {
        console.log( patients)
        this.setState({
          patients:  patients
        })
      })
      .catch(err => console.log(err))
  }
  render() {                
    return (
      <div className=" Patientss">
        <h2>List of Patient</h2>
        { this.state.patients && this.state.patients.map((c, i) => <li key={i}>{c.name}</li>)}
      </div>
    );
  }
}

export default Patients;

I hope it helps. Thanks!!

TypeError: this.state.patients.map is not a function

2 Answers2

Linked