import './CSS/number-grid.css';

const NumberGrid = (props) => {
    let squares = [];

    for (let i = 0; i < props.n; i++) {
        let row = [];
        for (let j = 0; j < props.n; j++) {
            row.push(<button className="square">{i * props.n + j + 1}</button>);
        }
        squares.push(<div key={i} className="grid-row">{row}</div>);
    }

    return <div className={"grid"}>{squares}</div>
}

const ExerciseFive = () => {
    return <div>
        <NumberGrid n={2}/>
        <NumberGrid n={3}/>
        <NumberGrid n={5}/>
    </div>
}

export {ExerciseFive};
