'Simple React view is triple rendering on browser

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>

reactjs

Solution 1:^[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bennett Forkner

'Simple React view is triple rendering on browser

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]