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

Question

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> )
          }
        )
        : "-"}
    </>
  );

Answer 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> )
          }
        </>)
        : "-"}
    </>
  );