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 is doing under the hood.

const Foo = () => {
    return (
    
foo
  );
}
console.log(React.isValidElement());
console.log();