React strap Cards unable to align items according to the screen size

Question

I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally

The Container Component Of The card

    import React from 'react'
    import SongCard from '../SongCard'
    import {
        CardDeck
    } from 'reactstrap';

    function Popular({ popular }) {
        return (
            <div>
                {popular.map((post) =>
                    <div key={post.etag}>
                        {
                            <CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
                                <SongCard
                                    Title={post.snippet.title}
                                    VideoId={post.id.videoId}
                                    Image={post.snippet.thumbnails.high.url}
                                    ChannelTitle={post.snippet.channelTitle} />
                            </CardDeck>
                        }
                    </div>)
                }
            </div>
        )
    }

    export default Popular

And the card component is

    import React from 'react'
    import {
        Card, CardImg, CardText, CardBody,
        CardTitle, CardSubtitle
    } from 'reactstrap';

    function SongCard({ Title, VideoId, Image, ChannelTitle }) {
        return (
            <div>
                <Card style={{maxWidth:'30em',flex: '1'}}>
                    <CardImg top width="100%" src={Image} alt="image" />
                    <CardBody>
                        <CardTitle>{Title}</CardTitle>
                        <CardSubtitle>{ChannelTitle}</CardSubtitle>
                        <CardText></CardText>
                    </CardBody>
                </Card>
            </div>
        )
    }

    export default SongCard

Answer 1

First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.

Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.

I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.

    import React from 'react'
import SongCard from '../SongCard'
import {
    CardDeck
} from 'reactstrap';

function Popular({ popular }) {
    return (
        <CardDeck>
            {popular.map((post) =>
                            <SongCard
                                key={post.etag}
                                Title={post.snippet.title}
                                VideoId={post.id.videoId}
                                Image={post.snippet.thumbnails.high.url}
                                ChannelTitle={post.snippet.channelTitle} />
                </div>)
            }
       </CardDeck>
    )
}

export default Popular

And

   import React from 'react'
import {
    Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle
} from 'reactstrap';

function SongCard({ Title, VideoId, Image, ChannelTitle }) {
    return (
            <Card>
                <CardImg top src={Image} alt="image" />
                <CardBody>
                    <CardTitle>{Title}</CardTitle>
                    <CardSubtitle>{ChannelTitle}</CardSubtitle>
                    <CardText></CardText>
                </CardBody>
            </Card>
    )
}

export default SongCard