Question 73860 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why is the .map() function not iterating? – Reactjs

I am trying to iterate through my state via .map(), but the function stops after the first return:

private renderEmployeesTable() {
if (this.state.employees) {


  return new Array(this.state.employees).map((_, index) => {



    const employeeId: string | undefined =
      this.state.employees[index]?.employeeId;
    const employeeName: string | null = this.state.employees[index]?.name;
    return (
      <>
        <div className="row">
          <div className="col">
            <p className="rowText">{employeeId}</p>
          </div>
          <div className="col">
            <p className="rowText">{employeeName}</p>
          </div>
          <div className="col">
            <p className="rowText">
              {
                this.state.workingHoursForEveryEmployee.find(
                  (res) => res.employeeId === employeeId
                )?.workingHours
              }
            </p>
          </div>
          <div className="col">
            <p className="rowText">{this.state.hoursToWork}</p>
          </div>
        </div>{" "}
      </>
    );
  });
}

}

In the console, index is 0 and doesn’t go up.
Do you have any idea, how I could fix this?

Tags:

2

Answers


  1. 0

    Your are creating a new Array() which contains only 1 item: an array.

    You probably don’t need the new Array() part, just map this.state.employees directly.

    Login or Signup to reply.
  2. 0

    You are trying to create an array that has only this.state.employees as an element. If you want to iterate elements with map in this.state.employees, use the map function directly.
    If you want to create iterables in the form of an Array, use Array.from()

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search