I have some problems with React.js states
Question
I am doing some excercises from tutorials on React.js component states. I must do edit, remove and save buttons to the document and textarea. I am trying to do them but my browser shows me an empty screen. My code:
<html>
<head>
<script src = "react-master/../js/react.js"></script>
<script src = "react-master/../js/react-dom.js"></script>
<script src = "js/browser.js"></script>
</head>
<body>
<div id = "example"></div>
<script type = "text/babel">
var Comment = React.createClass({
getInitialState: function(){
return {editing: false}
},
edit: function(){
this.setState({editing: true});
},
remove: function(){
console.log("Removing comments");
},
save: function(){
this.setState({editing: false});
},
renderNormal: function(){
return(
<div className = "comment-container">
<div className = "comment-text">{this.props.children}</div>
<button onClick = {this.edit}>Edit</button>
<button onClick = {this.remove}>Remove</button>
</div>
);
},
renderForm: function(){
return(
<div className = "comment-container">
<teaxtarea defaultValue = {this.props.children}></teaxtarea>
<button onClick = {this.save}>Save</button>
</div>
);
},
render: function(){
if (this.state.editing){
return this.renderForm;
}else{
return this.renderNormal;
}
}
});
ReactDOM.render(
<div className = "board">
<Comment>Hey now</Comment>
<Comment>Hey Anja</Comment>
<Comment>Hey Olga</Comment>
</div>,
document.getElementById("example"));
</script>
What kinda mistakes did I make?
2 answers
solution1
0 2017-04-06 08:58:44
Issue is you forgot to call the function, use this:
if (this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
One more thing, i am not sure about the reference you used, Use these it will work:
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
Check the working example:
<!DOCTYPE html> <html> <head> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> </head> <body> <div id = "example"></div> <script type = "text/babel"> var Comment = React.createClass({ getInitialState: function(){ return {editing: false} }, edit: function(){ this.setState({editing: true}); }, remove: function(){ console.log("Removing comments"); }, save: function(){ this.setState({editing: false}); }, renderNormal: function(){ return( <div className = "comment-container"> <div className = "comment-text">{this.props.children}</div> <button onClick = {this.edit}>Edit</button> <button onClick = {this.remove}>Remove</button> </div> ); }, renderForm: function(){ return( <div className = "comment-container"> <teaxtarea defaultValue = {this.props.children}></teaxtarea> <button onClick = {this.save}>Save</button> </div> ); }, render: function(){ if (this.state.editing){ return this.renderForm(); }else{ return this.renderNormal(); } } }); ReactDOM.render( <div className = "board"> <Comment>Hey now</Comment> <Comment>Hey Anja</Comment> <Comment>Hey Olga</Comment> </div>, document.getElementById("example")); </script> </body> </html>
solution2
0 2017-11-07 23:09:13
I'm a n00b but I figured out the problem in your code :-) Mayank's answer helps... you did forget to call the function by adding the () after renderForm() and renderNormal()
But even with that answer, the textarea still doesn't show up. After 10 minutes of messing with the logic I realized that it's just a typo. You wrote <teaxtarea> instead of <textarea> ... fix that typo, along with Mayank's solution, and it fixes your app :-)
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.