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.