Warning: Invalid DOM property `class`. Did you mean `className`?

Question

Im having this issue when I load my Home page which includes a couple of sections. Those sections are a Navbar, a main section, a card section and a footer section from top to bottom. I have two buttons that I use in the main section that are working fine when clicked but the buttons on my cards are not working. My Footer section button is working fine. When I look in the chrome dev tools I see that Warning message about the class, but I looked at my entire code from all my components and Im not using class anywhere. Here is the code for my Home page.

import React from 'react';
import { Card, CardTitle, CardImg, CardImgOverlay, CardText, Button } from 'reactstrap';
import '../../App.css';
import HeroSection from '../HeroSection';
import { Link } from "react-router-dom";

function Home(props) {
  
    const directory = props.services.map(service => {
      return (
        <div key={service.id} className="col-md-5 mx-auto d-block">
          <Card>
            <CardImg top width="100%" src={service.image} alt={service.name} />
            <CardImgOverlay>
              <CardTitle>{service.name}</CardTitle>
            </CardImgOverlay>
            <CardText>{service.description}</CardText>
            <Link to={service.path}>
                <Button 
                color="primary">Find Nearby
                </Button>{' '}
            </Link>
          </Card>
        </div>
      );
    });

    return (
      <>
        <div className="container">
          <div className="row">
            <HeroSection />
          </div>
          <div className="row">
            {directory}
          </div>
        </div>
      </>
  );
}

export default Home;

Answer 1

if you use svg tag, you should look at the attributes in there. attribute names must be camelCase too.

incorrect:

<path fill-rule="evenodd" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 "/>

correct on using js: fillRule