Here's some sample code from ReactKungfu:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
What does the : in render: function() signify? I haven't seen this explained in vanilla JS tutorials I have done, although I believe it signifies "[something] in [this other list/range] in Java
The curly brackets you put around the data passed into the function represent a JS object. render is simply a member variable of that object, so the : is to define that variable as the function after it.
It's basically equivalent to let render = function() { ... } outside of an object.
Related
i am using plunker editor for react for learning.
I am at beginner stage and trying to work on states with react for which i write this codes but it is not rendering can you help me through please.
var Product = React.createClass({
getInitialState: function(){
return(qty=>0);
},
buy: function(){
this.setState({qty:this.state.qty+1});
},
render:function(){
return (
<div>
<p>Android-Rs.1990</p>
<button onClick={this.buy}>Buy</button>
<h3>Qty:{this.state.qty}</h3>
</div>
);
}
});
React.render(<Product/>,document.getElementById("root"));
Instead of return(qty=>0); use return({qty: 0});
The reason for this is that getInitialState requires an object to be returned but in JavaScript qty=>0 actually creates an anonymous function and would somewhat equal function(qty) { return 0 }
What is this? return(qty=>0);
Do you want to return a boolean? Use >= instead.
If you want to assign the initial value of the state you can just use at the beggining of your component
state={
qty:0,
}
You should return an object with quantity set as 0 as explained here:
https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state
So something like this:
getInitialState: function(){
return { quantity: 0 };
},
getInitialState should return an object,
getInitialState: function(){
return{qty: 0};
},
I have an MVC test project that I am trying to use React components inside Angular directives. It will render the directive, but any props I pass in are undefined. Here are my files:
~/Scripts/Directives/HelloDirective.js:
var Hello = React.createClass({
render: function () {
return React.DOM.span(null,
'Hello ' + this.props.email
);
}
});
angular.module('App').value('Hello', Hello);
angular.module('App')
.directive( 'hello', function( reactDirective ) {
return reactDirective( Hello, ['email'] );
});
My folder structure for my views goes like this:
~/Views/Dashboard/Index.cshtml - this is my main view that has ng-view
~/Views/Dashboard/Dash.cshtml - this gets put inside the main view
Inside Dash.cshtml I have
<div ng-controller="DashboardController" class="btn-group">
<hello email="{{name}}"></hello>
</div>
Here is my DashboardController.js file:
angular.module("App")
.controller("DashboardController", ['$scope', 'Welcome', '$cookies', function ($scope, Welcome, $cookies) {
Welcome.name().success(function (data) {
$scope.name = data.name;
});
$scope.ChangeName = function (val) {
Welcome.EditName(val).success(function (data) {
});
};
/*
$scope.isOff() = function () {
var value = $cookies.get('Off');
return value === null;
}
$scope.Off = function () {
$cookies.put('Off', 'This turns the green button off');
}
$scope.On = function () {
$cookies.remove('Off');
}
*/
}]);
Once the page has finished loading up all that is rendered is Hello undefined.
For some reason the email prop inside the hello tag is not being read or recognized or something.
I have already tested to make sure that my WelcomeFactory returns data by just displaying {{name}} on the screen and it works just fine.
Can someone tell my where I went wrong?
Thanks!
So the answer to this question was annoyingly simply. It really came down to syntax. What I mean by that was the React Component I had looked like this:
<hello email="{{name}}"></hello>
I kept getting undefined for the email, as it turns out the issue was the curly braces. Once I took those out the React Component looked like this:
<hello email="name"></hello>
Then I started to get a value output on the screen.
Hope this helps someone else looking into this issue!
I'm trying to replicate the React code from this official guide:
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
Basically, I'm using ES5 and tried this:
componentDidMount: function() {
this.searchBox.focus();
},
render: function() {
return (
<input type="text" ref={function(c) {this.searchBox = c}} />
);
}
But I got an error saying:
Uncaught TypeError: Cannot read property 'focus' of undefined
Isn't the code above supposed to be the same like the ES6 version? I don't get it why it's not working. In case you're interested in the full code, here it is: https://jsfiddle.net/xpd85ehx/
ES5 and ES6 arrow notations use a different this.
Specifically, using the arrow notation, this is lexically bound to the surrounding function (so it refers to the class).
Using ES5 you will need to bind this to your function.
The es6 version uses arrow functions, which auto-binds the function to the existing scope. so for example,
function(c) {this.searchBox = c}
is not bound to the instance of the component, while
c => this.searchBox = c
is. In the first example, its hard to know what this is, but in the second, we can be pretty sure that this is a reference to our component`. If you want to make your solution work in es5, you need to manually bind, like this
render: function() {
return (
<input type="text" ref={(function(c) {this.searchBox = c}).bind(this)} />
);
}
I am trying to learn reactjs and building small app that takes in names and then shows the names..
I have an input form, and I am able to get data from input form after clicking submit into my state object called names.
however I am stuck on passing the state from the parent to another component that is inside of my ShowNames component:
So, in App, I am doing this render:
render : function() {
return (
<div>
<InputName addToState={this.addToState}/>
<ShowName renderName={this.renderName}/>
</div>
)
}
});
Then ShowName component has following:
var ShowName = React.createClass({
render : function() {
return (
<ListOfNames renderName={this.props.renderName}/>
)
}
});
So I made
var ListOfNames = React.createClass({
render : function() {
return (
<ul renderName={this.props.renderName}>
{Object.keys(this.state.names).map(this.renderName)}
</ul>
)
}
});
But the issue is it says Cannot read property 'names' of null. Can someone help?
You need to initialise the state otherwise the state will be null.
React.createClass({
getInitialState: function() {
return { names: [] };
},
// all the rest here
}
EDIT
after seeing the code I noticed a couple of errors, the updated code is now here: http://jsbin.com/sewoxu/edit?js,output
So what the main error was that the render function of ShowName was using the state to get the names, but the names where passed via property:
<ShowName renderName={this.renderName} names={this.state.names}/>
so in this case to access the names attribute you need to do:
this.props.names
Also in the example I have moved the renderName function inside the ShowName component.
Hope this helps :)
Is it possible to create an Angular app inside a react component?
Something like:
React.createClass({
render: function() {
return <div ng-app>...</div>;
}
});
This is completely backwards, but will only have to be a temporary solution. I'm assuming I could do something like the code above, and add the angular bootstrapping to the componentDidMount lifecycle method.
Has anyone successfully done this?
Thanks.
It would look something like this:
componentDidMount: function(){
this._angularEl = document.createElement("div");
this._angularEl.innerHTML = angularTemplatHTMLString;
this._angularEl.setAttribute("ng-app", "");
this.getDOMNode().appendChild(this._angularEl);
// bind angular to this._angularEl
},
componentWillUnmount: function(){
// unbind angular from this._angularEl
this.getDOMNode().removeChild(this._angularEl);
delete this._angularEl;
},
render: function(){
return <div></div>
}
You could either use this for each component, or create a function which returns a mixin.
function makeAngularMixin(template){
return { /* above code except for render */ }
}
or have a component which allows passing an angular template via props.