Unexpected token. Did you mean `{'}'}` or `&rbrace error when trying to render-CodePudding

here is the map function I'm trying to pass while rendering content to the html but i'm getting , expected error on line 3 in the conditional operator. And also on the closing bracket I'm getting Unexpected token. Did you mean {'}'}or} why can that be? Is it due to syntax?

 {newMessages.map(function (item) {
                         return (
                          { userId === item.event.sender ?
                            <div >
                              <div
                                
                              >
                                {item.event.content.body}
                              </div>
                              <img
                                src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                                
                                alt=""
                              />
                            </div>
                            :
                            <div >
                              <img
                                src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                                
                                alt=""
                              />
                              <div
                                
                              >
                                {item.event.content.body}
                              </div>
                            </div>}                     
                            )
                      }
                    )
                    }

CodePudding user response：

{ should be used in when interpolating a JavaScript expression into JSX - for example <div>{someVariable}</div>. If you're not in the context of JSX, using { instead delimits the beginning of an object literal.

Since you're not in JSX context at this point:

return (
    { userId === item.event.sender ?
    ^

An error is thrown.

Here, you can remove the { entirely and return the array of elements, without any JSX at that level.

{newMessages.map(function (item) {
  return (
    userId === item.event.sender ?

The time you'd want to use { there would be if there was something element surrounding each mapped item, eg:

{newMessages.map(function (item) {
  return (
    <div className="item-container">
      {
        userId === item.event.sender ?

CodePudding user response：

You had some syntax errors. Just make sure you enclose each JSX block with parentheses () and to use className property instead of class since it is a reserved keyword in JavaScript.

{newMessages.map((item) =>
  userId === item.event.sender ? (
    <div className="flex justify-start mb-4">
      <div className="ml-2 py-3 px-4 bg-blue-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white">
        {item.event.content.body}
      </div>
      <img
        src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
        className="object-cover h-8 w-8 rounded-full"
        alt=""
      />
    </div>
  ) : (
    <div className="flex justify-end mb-4">
      <img
        src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
        className="object-cover h-8 w-8 rounded-full"
        alt=""
      />
      <div className="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white">
        {item.event.content.body}
      </div>
    </div>
  )
)}

CodePudding user response：

The following code should work

{
    newMessages.map(function (item) {
        return userId === item.event.sender ? (
            <div className="flex justify-start mb-4">
                <div className="ml-2 py-3 px-4 bg-blue-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white">
                    {item.event.content.body}
                </div>
                <img
                    src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                    className="object-cover h-8 w-8 rounded-full"
                    alt=""
                />
            </div>
        ) : (
            <div className="flex justify-end mb-4">
                <img
                    src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                    className="object-cover h-8 w-8 rounded-full"
                    alt=""
                />
                <div className="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white">
                    {item.event.content.body}
                </div>
            </div>
        );
    });
}

You were using extra curly braces