33 lines
1.1 KiB
Plaintext
33 lines
1.1 KiB
Plaintext
== Why is this an issue?
|
|
|
|
React components describe an independent and reusable piece of UI. To define it one can declare a function (functional component) or a class (class component). When implementing a class component, a `render` method is required to return the DOM structure, typically with JSX syntax.
|
|
|
|
When writing the render method in a component it is easy to forget to return the JSX content, which means the component will render nothing. Thus having a `render` method without a single `return` statement is usually a mistake. If it's required that the component renders to nothing, the method should return `null`.
|
|
|
|
=== Noncompliant code example
|
|
|
|
[source,javascript]
|
|
----
|
|
const React = require('react');
|
|
class App extends React.Component {
|
|
render() {
|
|
<div>Contents</div>;
|
|
}
|
|
}
|
|
----
|
|
|
|
=== Compliant solution
|
|
|
|
[source,javascript]
|
|
----
|
|
const React = require('react');
|
|
class App extends React.Component {
|
|
render() {
|
|
return <div>Contents</div>;
|
|
}
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
* https://reactjs.org/docs/react-component.html#render[render()] - React API Reference |