React - component, props로 구구단 출력하기

App.js

import React, { useState } from 'react';
import Button from './Button';
import Layout from './Layout';
import Gugudan from './Gugudan';

function App() {
  const [number, setNumber] = useState(0);

  function onClickIncrease() {
    setNumber(number + 1);
  }
  function onClickDecrease() {
    setNumber(number - 1);
  }
  function onClickMultiply() {
    setNumber(number * 2);
  }
  return (
    <Layout>
      <Gugudan number={number}></Gugudan>
      <Button onClick={onClickIncrease} text="+1" />
      <Button onClick={onClickDecrease} text="-1" />
      <Button onClick={onClickMultiply} text="*2" />
    </Layout>
  );
}

export default App;

Gugudan.js

function Gugudan({number}){

    const n = [0,1,2,3,4,5,6,7,8,9];

    return(

        <div>
            {
            n.map((num)=><p>{number}*{num}={number*num}</p>)
            }
        </div>
    )
}

export default Gugudan;

Button.js

function Button({ text, onClick }) {
    return (

    
    <button onClick={onClick}>{text}</button>
    )
  }
  
  export default Button;