I'm trying to make a basic calculator with React and am having trouble figuring out how to format the buttons in the typical format (ex: "0 . =" on the bottom row, '1 2 3 +' on on the next row up and so on..) with React and Bootstrap.

I have the functionality working but keep running into errors when I try to use a grid ( etc.). Any recommendations on how to approach this? (New to React)

    render() { 
        //object destructuring
        const { onReset, buttons, onPress } = this.props;

        return (
            <div>
                <button
                    onClick={onReset}
                    className='btn btn-primary btn-sm m-2'
                    >
                        Reset
                </button>

                {buttons.map(button => (
                    
                    <Button 
                        key={button.id}
                        onPress={onPress}
                        button = {button} 
                    />
                ))}
            </div>
        );
    }

Edit in response to @lucasvw 's comment:

I attempted to wrap the .map method in . 'button not defined' was the error.

    {
        <Container>
            <Row>
                buttons.map(button => (
                        
                    <Button 
                        key={button.id}
                        onPress={onPress}
                        button = {button} 
                    />
                ))
            </Row>
        </Container>
    }

I also attempted to build a for loop to spit on button out at a time. I don't have that code handy, but I believe it was a series of unexpected expression errors.