In React, the render function is a required method in a class component that defines what will be rendered to the user interface (UI).
It is responsible for returning a value, typically a JSX (JavaScript XML) expression, that describes the structure and appearance of the component’s
UI.
When writing the render function in a component, it is easy to forget to return the JSX content, which means the component will render
nothing. Thus having a render function without a single return statement is usually a mistake.
const React = require('react');
class MyComponent extends React.Component {
render() {
<div>Contents</div>; // Noncompliant: The render function returns nothing
}
}
Make sure that the render function returns the JSX expression describing the structure and appearance of the component.
const React = require('react');
class MyComponent extends React.Component {
render() {
return <div>Contents</div>;
}
}
If it’s required that the component renders nothing, the render function should explicitly return null.
const React = require('react');
class MyComponent extends React.Component {
render() {
return null;
}
}
