二重ループを使うとなるとfor文を使いたいので、JSXの中（returnの内側）ではなく、returnより前で作りたいですね。ループという重い処理なので

useMemo

を使って以下のように実装してあげましょう

const rows = useMemo(() => {
  const _rows = []
  // discsという配列分だけ行を作ると仮定
  // <tr>内のループはmapを使ってます
  for (let i=0; i < discs.length; i++) {
    _rows.push(
      <tr>
        {[0,1,2,3].map(j => (
          <td><Disc info={boardInfo(i, j)} /></td>
        )}
      </tr>
    )
  }
  return _rows
},[discs])
return (
  <table>
    <tbody>
      {rows}
    </tbody>
  </table>
)