I am getting error in react when i use npm run build - Step 40

Curriculum Help
1

Tell us what’s happening:

in react when i use run build it goting this error

 TypeError: l.map is not a function
    at _n (AllPatientsTable.js:51:18)
    at Eo (react-dom.production.min.js:167:137)
    at Pi (react-dom.production.min.js:197:258)
    at Eu (react-dom.production.min.js:292:88)

but this is running in npm start
what i have to do now

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const AllPatientsTable = () => {
  const [patients, setPatients] = useState([]);
  const [filteredPatients, setFilteredPatients] = useState([]);
  const [doctors, setDoctors] = useState([]);
  const [selectedDoctor, setSelectedDoctor] = useState('');

  useEffect(() => {
    fetchPatients();
    fetchDoctors();
  }, []);

  const fetchPatients = () => {
    axios.get('/patients')
      .then(response => {
        console.log(response.data)
        setPatients(response.data);
        setFilteredPatients(response.data);
      })
      .catch(error => console.error('Error fetching patients:', error));
  };

  const fetchDoctors = () => {
    axios.get('/doctors')
      .then(response => {
        setDoctors(response.data);
      })
      .catch(error => console.error('Error fetching doctors:', error));
  };

  const handleDoctorChange = (event) => {
    const selectedDoctorId = event.target.value;
    setSelectedDoctor(selectedDoctorId);
    if (selectedDoctorId === '') {
      setFilteredPatients(patients);
      
    } else {
      const filtered = patients.filter(patient => patient.doctor && patient.doctor.id === parseInt(selectedDoctorId));
      setFilteredPatients(filtered);
    }
  };

  return (
    <div>
      {/* <h3>Home </h3> */}
      <label htmlFor="doctor">Select a Doctor:</label>
      <select id="doctor" onChange={handleDoctorChange} value={selectedDoctor}>
        <option value="">All Doctors</option>
        {doctors.map(doctor => (
          <option key={doctor.id} value={doctor.id}>{doctor.name}</option>
        ))}
      </select>
      {filteredPatients.length === 0 ? (
        <p>No patients have been assigned to this doctor.</p>
      ) : (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Weight</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Disease</th>
            <th>Assigned Doctor</th>
          </tr>
        </thead>
        <tbody>
          {filteredPatients.map(patient => (
            <tr key={patient.id}>
              <td>{patient.name}</td>
              <td>{patient.weight}</td>
              <td>{patient.gender}</td>
              <td>{patient.age}</td>
              <td>{patient.disease}</td>
              <td>{patient.doctor ? patient.doctor.name : 'Not Assigned'}</td>
            </tr>
          ))}
        </tbody>
      </table>
       )}
    </div>
  );
};

export default AllPatientsTable;
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

I assume you mean the production build throws that error when you run it, not that it throws that error building the production build.

What does the API fetch log out in production?