-1

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;
alejandro aucestovar
  • 1
  • im importing Services as props to my Home page from my main component that is using RR. Here is an example of that data: – alejandro aucestovar Nov 24 '20 at 13:34
  • export const SERVICES = [ { id: 0, name: 'Baptist Services', image: 'images/baptist.jpg', description: "Baptists believe that a church of Jesus Christ is a body of baptized believers, associated together in one place to preach the gospel, to keep the ordinances and represent the in- terests of Christ's kingdom in the world.", path: '/baptistSearch' }, – alejandro aucestovar Nov 24 '20 at 13:34
  • Can you please create a working version of your code in CodeSandBox? – Shuvo Nov 24 '20 at 13:45
  • @alejandroaucestovar If you have additional information to add, please [edit](https://stackoverflow.com/posts/64987598/edit) your question and add it. The comments are not a good place for it. – Brian Thompson Nov 24 '20 at 14:17

1 Answers1

0

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

Melis
  • 41
  • 1
  • 3