Rendering Multiple jsx with map and contains throws syntax error : ReactJS

I am trying to render jsx using map and then using includes to display a text based on the value present in the list. It throws error saying "message": "Unexpected token. Did you mean {‘}’}or}`. Can someone help me with this

The code that I have tried:

  return (
    <>
      {list.length
        ?
          list.map((item, idx) => {
            return (
              <span key={idx}>
                {item}
              </span>
            )}
          {list.includes("Test") && (
            <span key="test">
              Replacement
            </span> )
          }
        )
        : "-"}
    </>
  );

1 thought on “Rendering Multiple jsx with map and contains throws syntax error : ReactJS”

  1. You are calling list.includes inside your map function after you closed the curly bracket. I think you wanted something like this:

      return (
        <>
          {list.length
            ?
              (<>
               {list.map((item, idx) => {
                return (
                  <span key={idx}>
                    {item}
                  </span>
                )}
              )}
              {list.includes("Test") && (
                <span key="test">
                  Replacement
                </span> )
              }
            </>)
            : "-"}
        </>
      );
    
    Reply

Leave a Comment