Don't use Generator as a child of a React element |
When working with generator functions, don't use the returned Generator object directly as a child of a React element
CheckId | RCT010105 |
---|---|
TypeName | GeneratorObjectRule |
Severity | Error |
Type | React component |
When working with generator functions, don't use the returned Generator object directly as a child of a React element. Instead, convert it first to an array using either the spread operator ([...generator]) or using the Array.from() function.
Bad practice
function* items() {
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{items()}
</ul>
);
}
}
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{items()}
</ul>
);
}
}
Good practice (use spread operator)
function* items() {
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{[...items()]}
</ul>
);
}
}
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{[...items()]}
</ul>
);
}
}
Good practice (use Array.from())
function* items() {
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{Array.from(items())]}
</ul>
);
}
}
yield <li key="i1">Item 1</li>;
yield <li key="i2">Item 2</li>;
}
export class List extends React.Component {
render() {
return (
<ul>
{Array.from(items())]}
</ul>
);
}
}
Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.