== Why is this an issue?

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. 

[source,javascript,diff-id=1,diff-type=noncompliant]
----
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.

[source,javascript,diff-id=1,diff-type=compliant]
----
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++``.

[source,javascript]
----
const React = require('react');
class MyComponent extends React.Component {
  render() {
    return null;
  }
}
----

== Resources
=== Documentation

* https://react.dev/reference/react/Component[React - Component]
* https://react.dev/reference/react/Component#render[React - ``++render()++``]