Return null from a stateless component/“functional component”

Question

I have a stateless functional component in React 0.14 that worked in React 0.13, but now returns the following error:

No render method found on the returned component instance: you may have forgotten to define render, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.

This is my component:

function ToggleDisplay(props) {
    //should render a <noscript> per React's implementation
    if(props.if === false) {
        // return <noscript></noscript>; //do I have to do this manually now?
        return null;
    }

    let style = {};
    if(shouldHide(props)) {
        style.display = 'none';
    }
    return (
        <span style={style} {...props} />
    );
}

Do I have to manually return a <noscript> now? Is there another way to return null in stateless component?

@DominicTobias This should be an accepted answer, I think. Prevent the component from being rendered in the first place. — Logic Artist

Ray Booysen Ray Booysen · Accepted Answer · 2015-11-20T16:13:54

Looks like not, this is a technical constraint in Javascript. To support arrow functions and plain functions as "components" React needs to know if we can call new on them.

We can call new on everything if they're plain functions as long as they return a ReactElement. However, that won't work for null/false/string return values and we want to support those too. We also can't call new on arrow functions. Likewise, we can't NOT call new on classes.

Relevant GitHub Issue

Return null from a stateless component/“functional component”

2 Answers