Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js): SyntaxError:

Question

ERROR in ./src/components/MainComments/MainComments.js

Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\atapi\Desktop\brainstation\alex-tapia-brainFlix\brainflix\src\components\MainComments\MainComments.js: Unexpected token, expected "," (80:4)

  78 |      </ul>   
  79 |     </div>
> 80 |     {props.image.map((image,index) => {
     |     ^
  81 |     return (
  82 |       <div key={index}>
  83 |         <img src={image.image} alt={image.title} />

don't know what the error can be, I've reinstalled babel doublecheck the spelling even asked chat gpt about it and still getting the same error. this is my code

 {props.image.map((image,index) => {
    return (
      <div key={index}>
        <img src={image.image} alt={image.title} />
        <div>
          {image.comment.map((comments, commentsIndex) => {
            return (
              <div key={commentsIndex}>
                <p>{comments.name}</p>
                <p>{comments.comment}</p>
                <p>{comments.timestamp}</p>
              </div>
              )
            }
            )
        }
          </div>
        </div>
      )
      }
      )
     }
  );
}

Answer 1

Correct the way you're returning the innermost object

{props.image.map((image,index) => { return ( {imageData: image.comment.map((comments, commentsIndex) => ({

name: {comments.name},

comment: {comments.comment},

time: {comments.timestamp}

}  )) } ) } ) }