Uncaught Error: A valid ReactComponent must be returned.

[natew]

For some reason I'm getting this error:

Uncaught Error: Invariant Violation: Popover.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

It seems to import just fine and I'm trying a variety of props, but always getting this.

[natew]

Turns out if I change render to be this, it works:

  render() {
    return <div>{this.props.children}</div>
  }

[jasonkuhrt]

Hey can you paste me the before-code too, I'm not sure I understand what you're doing.

[jasonkuhrt]

Turns out if I change render to be this, it works:

I see now, you are referring to the render of react-popover itself https://github.com/littlebits/react-popover/blob/master/lib/index.js#L429-L431.

Ok.

@natew It would be somewhat helpful to know what the value of this.props.children was in your case.

[jasonkuhrt]

I was able to recreate your issue via user-error. For example:

let popover = Popover(popoverProps)
let popover = Popover(popoverProps, undefined)

will fail with:

Warning: Failed propType: Required prop `children` was not specified in `<<anonymous>>`. Check the render method of `Demo`.
Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

While this is a user-error not a component-error it is fair to say the component does not fail gracefully and leads the programmer astray while trying to debug (hence this issue).

I will create a defaultProp for children of null which will ensure that the user only sees the React PropType warning which I think is a lot nicer. Because the PropType is here, I will not throw a domain-specific assertion error. I hope that this seems adequate to you @natew.

[pwnedDesal]

i tried this

render: function() {
        var posts=null;
        posts= <Single_post/>;
        return(
          <div>
            {posts}
          </div>
          );
      }

without <div></div>, you will get Uncaught Error: A valid ReactComponent must be returned

[RatanPaul]

@DeadStar1 You return statement should be inside { }

Like

return{
   <div>
      {posts}
   </div>
 };