I have such React-bootstrap code example:

import Media from 'react-bootstrap/Media';

const Product = (props) => {
    return (
     <div>
         <Media>
            <img
            width={64}
            height={64}
            className="mr-3"
            src={props.data.imageUrl}
            alt="Product Imag"
            />
            <Media.Body>
                <h5> {props.data.productName} </h5>
                {props.data.releasedDate }
                <Rating
                rating={props.data.rating} numOfReviews={props.data.numOfReviews}
                />
                <p> {props.data.description} </p>
            </Media.Body>
        </Media>
     </div>
    );
}

but seems as in react-bootstrap version 2.2.3 where made some changes and now there aren't tags and <Media.Body> anymore

So how I can replace this tags according to the current version?

CodePudding user response：

From your code, I would say that the Card or maybe Image components are what you're looking for:

Card

Image

Looks like you'd just have refactor Media to Card in the above example to get it working.

CodePudding user response：

As @arfi720 has mentioned, it looks like you can migrate to Card and Image components. Because bootstrap is mostly css/styling, you can change it to everything you want. Or you dont need to use something, that is not suitable for you (here Card.Img). I've just created similar component few days ago and put the Image in Card.Body, as it already stacks horizontally:

<Card style={{ width: "18rem" }}>
    <Card.Body>
        <Image src="holder.js/100x50" className="me-2" />
        Test
    </Card.Body>
</Card>

https://codesandbox.io/s/unruffled-ishizaka-l70ftr?file