React isValidElement comes out as false

Question

Here is a simple example:

const Foo = () => {
    return (
    
foo
  );
}

class Bar extends React.Component {
    render() {
    retur         


        

Answer 1

Component != Element

Foo and Bar are components. An element is basically the result of "instantiating" (also not really, not sure what the right term is) a component. It's the combination of a constructor/function/string (for HTML components), props and children.

You get an element when you call React.createElement(Foo), which is what <Foo /> is doing under the hood.

const Foo = () => {
    return (
    <div>foo</div>
  );
}
console.log(React.isValidElement(<Foo />));
console.log(<Foo bar={42} />);

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

Answer 2

To check for a function component:

typeof Foo === 'function'

Answer 3

const Foo = () => <div>foo</div>;

class Bar extends React.Component {
    render() {
       return (
          <div>bar</div>
       )
    }
}

console.log(React.isValidElement(<Foo />));
console.log(React.isValidElement(<Bar />));