this.props.map is not a function in react

Question

Here is my App.js

class App extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
      employees: []
    };
  }

  loadEmployees() {
    fetch('http://localhost:8080/Employee') 
    .then((response) => response.json()) 
    .then((responseData) => { 
      this.setState({ 
        employees: responseData
      }); 
    });     
} 

    componentDidMount() {
        this.loadEmployees();
    }

    render() {
        return (
            <EmployeeList employees={this.state.employees}/>
        )
    }

}

export default App;

Here is the Employee.js

class Employee extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.employee.firstName}</td>
                <td>{this.props.employee.lastName}</td>
                <td>{this.props.employee.description}</td>
            </tr>
        )
    }
}

export default Employee;

And EmployeeList.js

class EmployeeList extends Component {
    render(){
        var employees = this.props.employees.map(employee =>
          <Employee key={employee._links.self.href} employee={employee}/>
        );
        return (
          <table>
            <tbody>
              <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Description</th>
              </tr>
              {employees}
            </tbody>
          </table>
        )
      }
}

export default EmployeeList;

I have spring-boot rest point at the http://localhost:8080/Employee

Here is my Controller class.

@RestController
public class EmployeeController {

    @Autowired
    EmployeService employeeService;

    @RequestMapping(value="/Employee")
    public List<Employee> defaultEmployee() {
        return employeeService.getAllData();
    }
}

I am returning List<Employee> , it turns to JSON, when I try to catch this result, here is the error.

The Rest returns employees from the DB, but i can not map it into the list.

Can anyone tell me what is the problem?

Answer 1

Make sur that the this.state.employees is an array , the things in react the component will render no mather if the value of the props are empty or not and the map function will trow an error if you try to pass an empty array

so on your EmployeeList.js added this code

class EmployeeList extends Component {
    render(){
       var employees = <div>Loading</div>
       if(this.props.employees.length > 0){
          employees = this.props.employees.map(employee =>
          <Employee key={employee._links.self.href} employee={employee}/>
        );
         } 
        return (
          <table>
            <tbody>
              <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Description</th>
              </tr>
              {employees}
            </tbody>
          </table>
        )
      }
}

Please test it and let me know if it work