Conditionally render list with Higher Order Component

Question

My app has a feature toggle functionality that tells my UI whether or not a piece of UI should be rendered. I would like to create a Higher Order Component to conditionally render these types of components. In one scenario, I'm trying to conditionally render a list, but I'm running into this error:

ConditionalRender(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

This makes sense since I just am trying to render the children of this component. Here's what I've got so far:

https://jsfiddle.net/fmpeyton/cykmyabL/

var settings = { showHello: true, showGoodbye: false};

function ConditionalRender (props) {
    var output = null;

  if(props.shouldRender) output = props.children;

  console.log(output);
  // return (<li>{output}</li>); // This works, but isn't desired html structure
  return ({output});
}

function App (props) {
    return (
    <ul>
        <ConditionalRender shouldRender={props.settings.showHello}>
        <li>Hello!</li>
      </ConditionalRender>
      <ConditionalRender shouldRender={props.settings.showGoodbye}>
          <li>Goodbye...</li>
        </ConditionalRender>
    </ul>
  );
}

ReactDOM.render(
  <App settings={settings} />,
  document.getElementById('container')
);

If I can help it, I would just like to render the children without any additional logic.This HOC would also handle more complex children down the line. Something like this:

<ConditionalRender shouldRender={props.settings.showHello}>
<div>
<p> blah blah blah</p>
<table>
<!-- ... -->
</table>
</div>
</ConditionalRender>

Any ideas?

Andrei Dotsenko · Accepted Answer · 2017-02-07T12:38:03.330

3

Try this:

function App(props) {
  return (
    <ul>        
      {props.settings.showHello && <li>Hello!</li>}
      {props.settings.showGoodbye && <li>Goodbye...</li>}
    </ul>
  );
}

P.S. Your code doesn't work because of this line:

return ({output});

Assuming you have es2015 support, it would be treated as object property shorthand. So it's the same as:

return {output: output};

which is not what React expects to get from the render method.

You could try this:

function ConditionalRender(props) {
  if (props.shouldRender) {
    // Make sure we have only a single child
    return React.Children.only(props.children);
  } else {
    return null;
  }
}

But this is not the simplest way. See more here.

P.P.S. Your ConditionalRender component is not what is called Higher-Order Component. According to the docs, HOC is a function that takes a component and returns a new component.

edited Feb 07 '17 at 12:38

answered Feb 07 '17 at 09:20

Andrei Dotsenko

78
5

Thanks for the thorough answer! Could you tell me why returning `props.children` wouldn't work, but `React.Children.only(props.children)` will? Is it because I wrapped the `output` with brackets/parens? Also, thanks for the tip on HOC. I'll continue to educate myself. – Fillip Peyton Feb 07 '17 at 17:45
Both versions will work, `React.Children.only` is just a recommendation. Brackets are the reason of the error. – Andrei Dotsenko Feb 07 '17 at 22:23
Finally: `return {props.children}` doesn't work. `return ({props.children})` doesn't work. `return props.children` works when there is only a single child. `return React.Children.only(props.children)` works if there is a single child and throws an exception with a clear message otherwise. – Andrei Dotsenko Feb 07 '17 at 22:30
Makes sense. Is there a way to render nested children or adjacent children? – Fillip Peyton Feb 07 '17 at 22:37
**TL;DR** No way without wrapping them into a single node. See this [question](http://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render) – Andrei Dotsenko Feb 07 '17 at 22:51
Good tips. Thanks again for all your help! – Fillip Peyton Feb 07 '17 at 22:55

Conditionally render list with Higher Order Component

1 Answers1

Linked