Kousha Kousha - 26 days ago 12
React JSX Question

React isValidElement comes out as false

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 Source

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>