React : 구구단 출력하기

---

요구사항

구구단을 2~9단 출력한다
단, 5단은 제외한다
홀수 단은 다른 색으로 표시한다.
구구단은 오른쪽으로 나열되게 한다.

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 <div style={{ display: "flex" }}>
    {/* 여기에 JSX를 활용하여 요구사항에 맞게 구구단을 완성시켜보세요! */}
  </div>

 

풀이

function list(a) {
  return (
    <ul
      style={{
        listStyle: "none",
        color: a === 3 || a === 7 || a === 9 ? "blue" : "black",
      }}
    >
      {num.map((i) => {
        return <li key={a * i}>{`${a} X ${i} = ${a * i}`}</li>;
      })}
    </ul>
  );
}

<div style={{ display: "flex" }}>
    {list(2)}
    {list(3)}
    {list(4)}
    {list(6)}
    {list(7)}
    {list(8)}
    {list(9)}
</div>

 

정답 코드

 <div style={{ display: "flex" }}>
    {num.map(
      (n) =>
        n >= 2 &&
        n !== 5 && (
          <div style={{ padding: 10, color: n % 2 ? "blue" : "black" }}>
            {num.map((m) => (
              <div>
                {n} X {m} = {n * m}
              </div>
            ))}
          </div>
        )
    )}
  </div>