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?

You are missing `constructor` and a call to `super(props)` in `EmployeeList` — cjmling, Mar 27 '18 at 08:47
@brandNew you are right, we need `super(props)` only when we need to access `this.props` in `constructor` while in `render` doesn't necessary. https://stackoverflow.com/a/34995257/507203 — cjmling, Mar 27 '18 at 09:25

score 0 · Accepted Answer · answered Mar 27 '18 at 09:47

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

you are right, when I add this if conditition for the empty value, it says Loading... That means my Rest API returns nothing, now I am searching to fix Rest API, Thanks. — sakirow, Mar 27 '18 at 10:33

this.props.map is not a function in react

1 Answers1