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?`

Answer 1

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})

Answer 2

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!!