React - Uncaught Invariant Violation:
Question
When I run my code on browser, I'm getting this error message.
Uncaught Invariant Violation: MyComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
I'm using Atom as my code editor and running on a chrome web server. Here is my code.
<body>
<div id="react-comp"></div>
<script type="text/babel">
var MyComponent = React.createClass({
render: function() {
return
<div>
<h1>{this.props.text}</h1>
</div>;
}
});
ReactDOM.render(
<div>
<MyComponent text="Hello World"/>
<MyComponent text="Hello"/>
</div>
, document.getElementById('react-comp'));
</script>
</body>
It might be a jsx transforming issue? or any other thing?
3 answers
solution1
2 ACCPTED 2016-06-17 17:14:47
You are likely hitting JavaScripts automatic semicolon insertion after return . Just remove the line break before your div.
var MyComponent = React.createClass({
render: function() {
return <div> // Change this line
<h1>{this.props.text}</h1>
</div>;
}
});
solution2
1 2016-06-17 17:15:25
Just change your render function to
var MyComponent = React.createClass({
render: function() {
return (
<div>
<h1>{this.props.text}</h1>
</div>
);
}
});
Daniel's suggestion is also correct.
solution3
1 2016-06-17 17:15:55
I don't know which version of React you are using, as I know some old version makes error if the JSX syntax isn't wrapped with (). Try to do this on MyComponent's render method:
render: function() {
return (
<div>
<h1>{this.props.text}</h1>
</div>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.