I'm trying to test React out for myself. I got a simple "Hello World" message outputted successfully, so I tried taking this a step further and loop through data.
I'm getting a "waiting for roots to load…to reload the inspector” error, which after Googling tells me I have an issue with my syntax. I just can't find it... so your help is much appreciated!
var data = [
{perc:"2.2%", year:"5"},
{perc:"3.2%", year: "7"}
]
var Rates = React.createClass({
render: function(){
return (
<div>
<RateList data={this.props.rates} />
</div>
)
}
});
var Rate = React.createClass({
render: function(){
return (
<div>
<ul>
<li>{this.props.percent}</li>
</ul>
</div>
)
}
});
var RateList = React.createClass({
render: function(){
return (
<div>
<ul>
{ this.props.data.map(function(rate){
return <Rate percent={rate.perc} />
}) }
</ul>
</div>
)
}
});
ReactDOM.render(<Rates rates={data} />, document.getElementById("wow"));
It seems you could simplify a little.
var data = [
{perc:"2.2%", year:"5"},
{perc:"3.2%", year: "7"}
]
var RateList = React.createClass({
render: function(){
return (
<div>
<ul>
{ this.props.rates.map(function(rate){
return <li>{rate.perc}</li>
}) }
</ul>
</div>
)
}
});
ReactDOM.render(<RateList rates={data} />, document.getElementById("wow"));
Related
So I am learning react.js, and I am developing a quick search engine using the GitHub API of users.
The API side of the project works fine (I have tested by manually entering names into the area)
Its the search build in react that is not working.
(FYI: I am using Plunker which has react support)
script.jsx
var Card = React.createClass({
getInitialState: function(){
return{};
},
componentDidMount: function(){
var component = this;
$.get("https://api.github.com/users/" + this.props.login, function(data){
component.setState(data);
});
},
render: function(){
return(
<div>
<img src={this.state.avatar_url} width="100"/>
<h3>{this.state.name}</h3>
<hr/>
</div>
);
}
});
var Form = React.createClass({
handleSubmit: function(e){
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addCard(loginInput.value);
loginInput.value = '';
},
render: function(){
return(
<form onSubmit={this.handleSubmit}>
<input placeholder="Enter Github Name" ref="login"/>
<button>Search</button>
</form>
);
}
});
var Main = React.createClass({
getInitialState: function(){
return {logins: []};
},
addCard: function(loginToAdd){
this.setState({logins: this.state.logins.concat(loginToAdd)});
},
render: function() {
var cards = this.state.logins.map(function(login){
return (<Card login={login} />);
});
return(
<div>
<Form addCard={this.addCard} />
{cards}
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("root"));
The problem was (if you check console), that you had a duplicate script tag in the <head> which you didn't need. And also, you were doing React.findDOMNode instead of ReactDOM.findDOMNode
Line 25 of your JSX file:
var loginInput = ReactDOM.findDOMNode(this.refs.login);
That said, you don't need to do ReactDOM.findDOMNode. You can just use this.refs.login
Here, i have included a my example code. If it is one dimensional array means, i can easily insert json data's into my code. How to achieve this one with multidimensional json data with react js?
var Category = React.createClass({
render: function() {
return (
<div>
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>
{el.product}
</div>
<div>
{el.quantity}
</div>
</div>;
})}
</div>
);
}
});
var data = [
{
product:"a",
quantity:28,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
},
{
product:"b",
quantity:20,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
}
];
React.render(<Category data={data}/>, document.body);
You can create component for sub categories like this,
var SubCategory = React.createClass({
render: function () {
var list = this.props.data.map(function(el, i) {
return <li key={i}>{ el.subItem }</li>;
});
return <ul>{ list }</ul>;
}
});
and use it in Category component
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>{el.product}</div>
<div>{el.quantity}</div>
<SubCategory data={ el.sub } />
</div>;
})}
Example
I'm going through the react tutorial here -
http://facebook.github.io/react/docs/tutorial.html
And I'm having problems on step 11 "Fetching from the Server"
Here is my .js file -
var WGGroupList = React.createClass({
render: function() {
var wggroupNodes = this.state.data.map(function(wggroup) {
return (
<WGGroup name={wggroup.name} key={wggroup.id}>
{wggroup.description}
</WGGroup>
);
});
return (
<div className="wggroupList">
{wggroupNodes}
</div>
);
}
});
var WGGroupForm = React.createClass({
render: function() {
return (
<div className="wggroupForm">
Hello, world! I am a Widget Group Form.
</div>
);
}
});
var WGGroupBox = React.createClass({
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="wggroupBox">
<h1>Description</h1>
<WGGroupList data={this.state.data} />
// <WGGroupList data={this.props.data} />
<WGGroupForm />
</div>
);
}
});
var WGGroup = React.createClass({
render: function() {
return (
<div className="wggroups">
<h2 className="wggroupName">
{this.state.data.name}
</h2>
{this.state.data.children}
</div>
);
}
});
ReactDOM.render(
<WGGroupBox data="http://servername/api/wggroups/?format=json" />,
// <WGGroupBox data={data} />,
document.getElementById('content')
);
It works if I do the example previous with the data hardcoded -
var data = [
{id: 1, name: "Primary Widgets", description: "This is my Primary Widget group"},
{id: 2, name: "Secondary Widgets", description: "This is my secondary Widget group"}
];
The json served from the API is exactly the same format as above. So why, if using my URL do I get the following -
Uncaught TypeError: Cannot read property 'data' of null
It's failing on this line -
var wggroupNodes = this.state.data.map(function(wggroup) {
If I debug in my browser the datasource is not showing up so I'm guessing the issue is why is it not loading the url data?
I checked step 11 in the Tutorial and came across this sentence:
"Note: the code will not be working at this step."
At step 13 the function that fetches data from a server is introduced.. right now you are just passing a url-string around.
I have written code from the ReactJs site here while working through their comment box tutorial. Yet for some reason it is giving me an error about map:
Uncaught TypeError: this.props.data.map is not a function
Specifically it is complaining about line 7: var commentNodes = this.props.data.map(function (comment){ .. etc.. }
This error is particularly confusing since data is a list. Here is the full code displaying that:
var CommentList = React.createClass({
render: function(){
console.log(data)
var commentNodes = this.props.data.map(function (comment){
return (<Comment author={comment.author}>
{comment.text}
</Comment>);
});
return (<div className="commentList">
{commentNodes}
</div>);
}
});
var Comment = React.createClass({
render: function(){
return (<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div> );
}
});
var CommentForm = React.createClass({
render: function(){
return (<div className="commentForm">I am a comment form!</div>);
}
});
var CommentBox = React.createClass({
render: function() {
return (<div className="commentBox">
<CommentList data="{this.props.data}" />
<CommentForm />
</div>);
}
});
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
React.render(<CommentBox data={data} />, document.getElementById('content'));
This shouldn't be wrapped in a string data="{this.props.data}". Just remove the quotes and it should work.
I am facing a very similar problem to this question, but I am fetching data using a Promise and want to render it into the DOM when it comes through. The console.log() displays all the items correctly. I think my problem is that the lodash.map returns an array of <li> elements, and so I am trying to call this.renderItems() in order to render (but renderItems() doesn't seem to exist). Am I doing something unconventional, is there an easier way, is there an equivalent function to replace my renderItems()?
renderArticleHeadline: function(article) {
console.log('renderArticleHeadline', article.headline);
return (
<li>
{article.headline}
</li>
)
},
render: function() {
return (
<div>
<ul>
{
this.renderItems(
this.fetchFrontPageArticles().then(data => {
lodash.map(data, this.renderArticleHeadline)
})
)
}
</ul>
</div>
);
}
It should be something like this
getInitialState: function() {
return {
items: []
};
},
renderArticleHeadline: function(article) {
return (
<li>
{article.headline}
</li>
);
},
componentDidMount: function() {
this.fetchFrontPageArticles().then(data => {
this.setState({
items: data
});
});
},
render: function() {
var items = lodash.map(this.state.items, this.renderArticleHeadline);
return (
<div>
<ul>
{items}
</ul>
</div>
);
}
P.S. read thinking in react