Expand Minimize

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>
        );
    }
}


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>
        );
    }
}


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>
        );
    }
}

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.