You should be using the map method in order to output an array of elements. Like so:

const Square = () => {

   //...

    return ( 
      <div> 
         currUser().played.map(square => {
           if (square === id) {
           console.log(0)
           return (
              <div className="inactive">
              </div>
             );
           };
           return (
              <div className="square">
              </div>
            );
         })
      </div>
    )

}

export default Square;

I'm not sure that if you also want to render the div with className="square", if YES then the correct way to do this should be like this:

return (
<>
 {currUser().played.filter(square => square === id)
   .map(square => (
      <div className="inactive">
      </div>
    )}
   <div className="square">
   </div>
</>
)

First, you have to filter out you required elements then chain it with map to return and render out the desired elements.

map can't be used with if condition because map should always return something in each iteration. And if you really want to use if condition map then you must also return something in else

Here curly braces are used to run javascript inside JSX.