reactjs - Unexpected token, for in loop in react js - Stack Overflow

admin管理员组

文章数量:1345467

I'm new to React.

I know that comments should be received as an object, so I tried using a for...in loop to iterate over them. However, when I attempted to use the for...in loop, I encountered an error:

{for (for Comment in commentData){
  <div className="space-y-6">
    <div className="border-b pb-6">
      <div className="flex items-start gap-4">
        <img
          src={Nodejs}
          alt="Nodejs"
          className="w-10 h-10 rounded-full object-cover"
        />
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <h3 className="font-semibold">{Comment.userName}</h3>
            <span className="text-gray-500 text-sm">{Comment.date}</span>
          </div>
          <p className="text-gray-700">{Commentment}</p>
        </div>
      </div>
    </div>
  </div>
}}

The error message says:

Unexpected token: did you mean {}?

I believe the issue is with how I am using the for...in loop inside JSX. Can someone explain the correct way to iterate over commentData and why this error occurs? I'd also appreciate an explanation of how JSX handles loops and how to properly fix this issue.

I'm new to React.

I know that comments should be received as an object, so I tried using a for...in loop to iterate over them. However, when I attempted to use the for...in loop, I encountered an error:

{for (for Comment in commentData){
  <div className="space-y-6">
    <div className="border-b pb-6">
      <div className="flex items-start gap-4">
        <img
          src={Nodejs}
          alt="Nodejs"
          className="w-10 h-10 rounded-full object-cover"
        />
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <h3 className="font-semibold">{Comment.userName}</h3>
            <span className="text-gray-500 text-sm">{Comment.date}</span>
          </div>
          <p className="text-gray-700">{Commentment}</p>
        </div>
      </div>
    </div>
  </div>
}}

The error message says:

Unexpected token: did you mean {}?

I believe the issue is with how I am using the for...in loop inside JSX. Can someone explain the correct way to iterate over commentData and why this error occurs? I'd also appreciate an explanation of how JSX handles loops and how to properly fix this issue.

• reactjs
• for-loop
• for-in-loop

Share Improve this question Follow edited yesterday Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked yesterday DipeshDipesh 1944 bronze badges 2

• This question is similar to: Loop inside React JSX. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Phil Commented yesterday
• This doesn't make much sense. for..in iterates an object's keys which wouldn't typically have properties like userName, date and comment. What sort of object is commentData? – Phil Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have to use map function to render the commentData, .map() returns a new array of

<div className="space-y-6"> .... </div>

elements, which React can directly render.

for..in does not return.

本文标签： reactjsUnexpected tokenfor in loop in react jsStack Overflow