Menu
I was showing a really basic Hello World with React and ReactDOM when I got a strange error Uncaught TypeError: inst.render is not a function. See it in this JSBin.
I've used React a lot, but new to ES6. Any ideas what I'm not seeing here?
The error seems to be saying that Hello does not have a render method, but I'm not sure.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js" type="text/javascript"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const Hello = () => {
<h1>Hi</h1>
};
const foo = () => {
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
}
foo();
</script>
</body>
</html>
487
Original
To use React with ES6, you need to inherit the React.Component class.
class Hello extends React.Component {
render() {
return <h1>Hi</h1>
}
}
See here at its documentation.
Update
You can also use function, or arrow in your case. However you need to return the component.
const Hello = () => <h1>Hi</h1>;
Notice the missing curly braces. In ES6, an arrow function without curly braces returns the result of its body expression.
83
TypeError: instance.render is not a function error comes when you don't have a render() function in your React component.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
