How to make multiple items fit on one row in ReactJS?

Question

Sorry, Newbie React developer. I have a React Component that renders featured products:

return (
        <CardDeck>
            {items && items.map(item =>
                <Card key={item.itemNumber} width="100px">
                    <CardHeader tag="h3">Featured</CardHeader>
                    <CardImg top width="75%" className="card-picture" src={"data:image/png;base64," + item.images[0]?.ImageData} id={item.itemNumber + "Img"} alt={item.itemNumber} />
                    <CardBody>
                        <CardTitle tag="h5">{item.itemNumber}</CardTitle>
                        <CardSubtitle tag="h6" className="mb-2 text-muted">{item.categoryName}</CardSubtitle>
                        <CardText>{item.itemDescription}</CardText>
                    </CardBody>
                    <CardFooter className="text-muted">{formatter.format(item.price)}</CardFooter>
                    <Button>Order</Button>
                </Card>
            )}                
        </CardDeck>
    );

It crams all seven items on one row.

How do I show only three three or four items with a left and right scroll button or have multiple rows with a max three or four items per row?

UPDATE

I figured out multiple rows. I swapped CardDeck for CardColumns and let BootStrap handle it. I would still like to know how to have a horizontal scroll.

UPDATE 2

I got horizontal scroll working by following This SO Answer as an example. It puts a scrollbar underneath the group. So now, how do I make it use left and right buttons and hide the scrollbar?

UPDATE 3

Using this accepted SO answer as an example, I changed my document to:

    render() {
        const buttonRight = document.getElementById('slideRight');
        const buttonLeft = document.getElementById('slideLeft');

        buttonRight.onclick = function () {
            document.getElementById('container').scrollLeft += 20;
        };

        buttonLeft.onclick = function () {
            document.getElementById('container').scrollLeft -= 20;
        };

        return (
            <div>
                <button id="slideLeft" type="button">Slide left</button>
                <CardGroup id="container" className="card-group-scroll">
                    {items && items.map(item =>                       
                            <Card key={item.itemNumber} tag="a" onClick={() => handleClick()} style={{ cursor: "pointer" }}>
                                <CardHeader tag="h3">Featured</CardHeader>
                                <CardImg top className="card-picture" src={"data:image/png;base64," + decompressToBase64(item.images[0]?.compressedImageData)} id={item.itemNumber + "Img"} alt={item.itemNumber} />
                                <CardBody className="card-body">
                                    <CardTitle tag="h5">{item.itemNumber}</CardTitle>
                                    <CardSubtitle tag="h6" className="mb-2 text-muted">{item.categoryName}</CardSubtitle>
                                    <CardText className="card-description">{item.itemDescription}</CardText>
                                </CardBody>
                                <CardFooter className="text-muted">{formatter.format(item.price)}</CardFooter>
                            </Card>   
                    )}                
                </CardGroup>
                <button id="slideRight" type="button">Slide right</button>
            </div>
        );
    }

... but I am getting this error:

TypeError: buttonRight is null

... on this line buttonRight.onclick = function () {

Answer 1

Question has mutated with no comments or answers. I asked a new question and was answered here