javascript - Return nothing using React render - Stack Overflow

I have render in React ponent. If a condition is fulfilled I want to do something, in this case to show a message when hover over an icon but otherwise I don't want it to do anything.

I tried with an if condition but it doesn't work. This is my code:

render() {
    const text= this.checkSomething();

    return (
    {
       if (text.length > 0) {
            <ActionBar>
                <div>
                    <Icon type="..."/>
                     //do something here
                </div>
        </ActionBar>
    }
}

But I get the following error:

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

I know that I return something that doesn' exist if text.length == 0, but is there any way to make it work, like don't return anything if the condition is not met?

I have render in React ponent. If a condition is fulfilled I want to do something, in this case to show a message when hover over an icon but otherwise I don't want it to do anything.

I tried with an if condition but it doesn't work. This is my code:

render() {
    const text= this.checkSomething();

    return (
    {
       if (text.length > 0) {
            <ActionBar>
                <div>
                    <Icon type="..."/>
                     //do something here
                </div>
        </ActionBar>
    }
}

But I get the following error:

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

I know that I return something that doesn' exist if text.length == 0, but is there any way to make it work, like don't return anything if the condition is not met?

• javascript
• reactjs

Share Improve this question Follow asked Jun 20, 2017 at 8:35 Samurai JackSamurai Jack 3,13599 gold badges3636 silver badges5959 bronze badges 3

• 1 Possible duplicate of If statement within shorthand if statement – Shubham Khatri Commented Jun 20, 2017 at 8:38
• @ShubhamKhatri Very nice answer. You have typo: if statments :) – Amiga500 Commented Jun 20, 2017 at 8:56
• @VedranMaricevic, Thanks, fixed the typo :) – Shubham Khatri Commented Jun 20, 2017 at 8:58

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

You cannot have an if within the return of the render() function. Only ternary and short-circuit operations will work inside the return.

It's best to perform as much logic before your return.

Try this instead:

render() {
    const text= this.checkSomething();

    if(!text.length) return null;
    return (
      <ActionBar>
        <div>
          <Icon type="..."/>
          //do something here
        </div>
      </ActionBar>
    );
  }
}

In render, you need to return either a React.Element or null, so the shortest way could be like:

  render() {
    const text = this.checkSomething();

    return (
      text.length > 0 ? (
        <ActionBar>
          <div>
            <Icon type="..."/>
            //do something here
          </div>
        </ActionBar>
      ) : null
    ); 
  }

Read more about this here: https://facebook.github.io/react/docs/react-dom.html#render

You are not returning the Component. Try this code:

render()
{
    const text = this.checkSomething();

    if (text.length > 0) {
        return ( <ActionBar>
            <div>
                <Icon type="..."/>
                //do something here
            </div>
        </ActionBar> )
    } else {
        return null;
    }
}

You are on the right path. Just a little mistake. You should condition it like so:

render() {

  const text= this.checkSomething();

  if (text.length > 0) {
    return (
      <div>
        // do something
      </div>
    );
  }
  // if condition is not met
  return (
    <div>
      <h1>please wait while data is loading..</h1>
    </div>
  );

}

Its simple check for condition and return ponent or just null

render() {
const text= this.checkSomething();


   if (text.length > 0) {
       return <ActionBar>
            <div>
                <Icon type="..."/>
            </div>
    </ActionBar>
   }else{
      return null
   }
}

Here is working example.

class App extends React.Component {
  construct() {
    //...
  }
  
  sometext() {
   return '123213';
  }
  
  render() {
    return(
      <div>
     {(this.sometext().length > 0) ? <ActionBar /> : null}
     </div>
    );
  }
  
}

const ActionBar = () => (
  <div>Super</div>
)

  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

You can wrap it in a function and then call itself, all within the return.

return (
    <div>
      {(() => {
        if (catSay == "maow") return <p>meow</p>;
      })()}
    </div>
  );