Cannot use the grid system in Materialize.css in react

Question

I am trying to use the Materialize.css grid system in my react component, but the cards are not lining up next to each-other instead they are stacked. here is my code of both components.

component Pillows.js

import React, {Fragment, useContext, useEffect} from 'react';
import SinglePillow from "./SinglePillow";

import {GlobalContext} from "../../context/GlobalState";

const Pillows = () => {
    const {pillows, getPillows} = useContext(GlobalContext);

    useEffect(() => {
        getPillows();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <Fragment>
            <div className="pillows">
                {pillows.map(pillow => (
                    <SinglePillow pillow={pillow}/>
                ))}
            </div>
        </Fragment>
    );
};

export default Pillows;

component SinglePillow.js

import React from 'react';
//import pillow from "../pages/img/pillow1.jpg";

const SinglePillow = ({pillow}) => {
    return (
        <section id="popular" className="section section-popular scrollspy">
            <div className="container">
                <div className="row">
                    <div className="col s12 m4">
                        <div className="card">
                            <div className="card-image">
                                <img src={pillow.imageUrl} alt=""/>
                                <span className="card-title">Custom pillow</span>
                            </div>
                            <div className="card-content">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur dolor
                                    maiores obcaecati, sit tenetur?
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default SinglePillow;

Please assist

Answer 1

The container and row class should not be in the SinglePillow to create side by side SinglePillows. As there are multiple SinglePillows, these are creating multiple rows and stacking on top of one another. You can move the container and row class to parent component.