React renders only one component from an array

Question

Here's the problem with iterating over the components as array elements, I guess. I tried many iteration methods for loop, .forEach() and .map(). The some result was came only from the first one. It was rendered only one component from the array, when famous methods .forEach() and .map() wasn't rendered nothing at all.

I logged to the console the value of iterator variable from the above for loop and it wasn't incremented at all, it was 0, when the max count is 10.

Here's the code:

const renderState = () => {
    if (loading) {
      // When the users objects are loading from the server:
      return <p>Loading...</p>;
    } else if (hasErrors) {
      // When some loading-error occured:
      return <p>Can not load the page.</p>;
    } else {
      // And when loading was successfully finished, rendering all of them:
      for (let i = 0; i < users.length; i++) {
        return <ProfileCard key={users[i].id} user={users[i]} />
      }
    }
  };

Takkie253 · Accepted Answer · 2022-11-04 10:45:03Z

1

I think only 1 item is rendering because you are returning something. "The return statement ends function execution and specifies a value to be returned to the function caller." - MDN docs

I've got a list in my app and that goes:

{orders.map((order) => ( 
    <Order key={order.Oid} data={order}/>
))}

So, try removing the return statement. And try it with .map

EDIT:

in the else statement:

return {users.map((user) => <ProfileCard />)}

edited Nov 4, 2022 at 10:45

answered Nov 4, 2022 at 10:31

Takkie253

1662 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Takkie253 Over a year ago

Ahh I see. Try return {users.map((user) => <ProfileCard />)}

VikingUkr Over a year ago

Thanks a lot! It finally worked for me! God bless your heart! Thanks:))

Takkie253 Over a year ago

No problem my friend, can you 'solve' the question? :)

VikingUkr Over a year ago

Yes, It's solved and works fine well:)

VikingUkr · Accepted Answer · 2022-11-04 10:58:02Z

1

The solution is to put the iterating function (for this case it's the .map() method) into the direct return statement of the React component:

return (
    <div>
      {
        users.map((user) => (
          <ProfileCard key={user.id} user={user} />
        ))
      }
    </div>
  );

answered Nov 4, 2022 at 10:58

VikingUkr

194 bronze badges

Comments

Shahed · Accepted Answer · 2022-11-04 11:20:39Z

1

 for (let i = 0; i < users.length; i++) {
        return <ProfileCard key={users[i].id} user={users[i]} />
      }

Here when for loop starts iterating it goes to this return line. And return inside a loop tells the loop to break the execution flow right at that point and return whatever you got.

That is the reason only 1 profile card appears.

Solution:

{array.map((item) => ( 
    <Component key={item.key} data={item.data}/>
))}

With this map method you are running a function on each iteration and return something on completion of each iteration.

So each iteration creates a new function which returns some Component. That is why this works even if you have a implicit return.

answered Nov 4, 2022 at 11:20

Shahed

2,1007 silver badges24 bronze badges

Collectives™ on Stack Overflow

React renders only one component from an array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related