React component is getting rendered twice

Question

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.

however, in the recent development, the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code, have written <div> just once. scratching my head how to fix this.

here is the code: App.js

import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";

class App extends Component {
  render() {
    return (
      <Router>
        <Carasel />
        <Cards />
      </Router>
    );
  }
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

card.js

import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";

import { Button } from "react-bootstrap";
import "./card-style.css";

class Card extends Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <div className="card text-center">
        <div className="overflow">
          <img src={img1} alt="image1" />
        </div>
        <div className="card-body text-dark" />
        <h4 className="card-title">{mouse}</h4>
        <p className="card-text text-secondary">lorem20</p>
        <a href="#" className="btn btn-outline-success">
          Go Anywhere
        </a>
      </div>
    );
  }
}

export default Card;

cards.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";

class Cards extends Component {
  render() {
    return (
      <div className="container-fluid d-flex justify-content-center">
        <div className="row">
          <div className="col-md-4">
            <Card mouse="DevOps" />
          </div>
          <div className="col-md-4">
            <Card mouse="Cloud Computing" />
          </div>
          <div className="col-md-4">
            <Card mouse="Machine Learning" />
            <Card />
          </div>
        </div>
      </div>
    );
  }
}
export default Cards;

now the issue is: <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue. while troubleshooting, seems the component is stateful? please suggest

Answer 1

It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.