Simple React view is triple rendering on browser-CodePudding

Learning React with a course called ZeroToMastery and the following code is causing the view to render the JSX code 3 times in the browser. Can anyone tell me how this is happening?

Card.js

import { render } from "@testing-library/react";
import React from "react";

const Card = () => {
    render (
        <div>
            <img alt="robots" src="https://robohash.org/test?200x200" />
            <div>
                <h2>Jane Doe</h2>
                <p>[email protected]</p>
            </div>
        </div>
    );
}

export default Card;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Card from './Card';
import 'tachyons';

ReactDOM.render(<Card />, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

CodePudding user response：

With React functional components (as opposed to class components), the standard way to load content is by returning from the function, not by using a render() method.

If you try return(…) inside of your Card class in place of render(…), you may see some more consistent output.