React – functional component container

I would like to create a container component in my application. I don’t know if this is possible or if it’s a good idea at all. I would be so very comfortable.

From this:

export default function App(){
    return(
           <div className={styles.CardsContainer}>
                <CardPrice price={700}/>
                <CardPrice price={3000}/>
                <CardPrice price={5000}/>
          </div>
    )
}

I want to do it:

export default function App(){
    return(
           <CardsContainer>
                <CardPrice price={700}/>
                <CardPrice price={3000}/>
                <CardPrice price={5000}/>
          </CardsContainer>
    )
}


I do this in CardsContainer:

export default function CardsContainer(){
    return(
           <div className={styles.CardsContainer}>

           </div>
    )
}

Obviously it doesn’t work) But I don’t know how to wrap properly.
I don’t want to put components with CardPrice in a CardContainer component. I want to wrap in App component

>Solution :

u can use this, but you will need take de props.chidlren inside of the container.

export default function CardsContainer({children}){
return(
       <div className={styles.CardsContainer}>
         {children}
       </div>
)

}

but i think will be better if u use styled component to create de container