how to avoid clash between ‘class’ vs ‘className’ while using bootstrap in react.js?

import React from 'react';

const Card = (product) => {
    return (
        <div class="card">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
                <h5 class="card-title">{product.name}</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
            </div>
        </div>
    );
};

export default Card;

What is the solution?