React isValidElement comes out as false

Question

Here is a simple example:

const Foo = () => {
    return (
    <div>foo</div>
  );
}

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

console.log(React.isValidElement(Foo));
console.log(React.isValidElement(Bar));

Both of these return false. Why is that?

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>