cb07b5ed74
## Review A dedicated reviewer checked the rule description successfully for: - [ ] logical errors and incorrect information - [ ] information gaps and missing content - [ ] text style and tone - [ ] PR summary and labels follow [the guidelines](https://github.com/SonarSource/rspec/#to-modify-an-existing-rule)
46 lines
1.5 KiB
Plaintext
46 lines
1.5 KiB
Plaintext
== 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()++``]
|