We Keep Coding

Separating the code into a function and calling it doesn't render

This works perfectly fine. Now, I would like to incorporate this into a function and just call the function within my expression. It doesn't work.
Working code:
render: function() {
return (
<div>
{this.props.list.map(function(listValue){
return <p>{listValue}</p>;
})}
</div>
)
}
});
ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));
code with the function (doesn't work):
var List = React.createClass({
addText: function()
{
this.props.list.map(function(listValue){
return <p>{listValue}</p>;
});
},
render: function() {
return (
<div>
{this.addText()}
</div>
)
}
});
ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));

You've extracted the call to map into another function and maybe assumed the return call inside it was sufficient to return the result of the whole call (it just returns the mapped value for that iteration of map).
You just need to return the result of your map in your addText function:
var List = React.createClass({
addText: function()
{
return ( // <------ADD THIS
this.props.list.map(function(listValue){
return <p>{listValue}</p>;
})
); //<<-----DON'T FORGET TO CLOSE OFF THE NEW BRACKET
},
render: function() {
return (
<div>
{this.addText()}
</div>
)
}
});

Tnx #Thomas altmann, I forgot to make another return prior to my first return
var List = React.createClass({
addText: function()
{
return (this.props.list.map(function(listValue){
return <p>{listValue}</p>;
})
);
},
render: function() {
return (
<div>
{this.addText()}
</div>
)
}
});
ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));

can you pass a component through props to children

can you pass a component through props to children
var TaskForm = require('../../../../components/assessment/tasks/TaskForm.react');
render: function() {
return (
<div>
<div className="row">
<div className="col-xs-12 col-lg-12">
<GroupsItemsAccordionWrapper
TaskForm=TaskForm
/>
</div>
</div>
</div>
);
}

Yes, you can pass any value as a prop, including an object returned by React.createClass (aka component class). Assuming you are implementing dependency injection:
var TaskForm = React.createClass({
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
var GroupsItemsAccordionWrapper = React.createClass({
render: function() {
var TaskForm = this.props.TaskForm;
return (
<div>
<TaskForm>Hello, world!</TaskForm>
</div>
);
}
});
ReactDOM.render(
<GroupsItemsAccordionWrapper TaskForm={TaskForm} />,
document.getElementById('container')
);
(Note the curly brackets around TaskForm={TaskForm}).
Demo: https://jsfiddle.net/69z2wepo/37477/

You can do this like that :
var DivWrapper = React.createClass({
render: function() {
return <div>{ this.props.child }</div>;
}
});
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
// create you component
var comp = <Hello name="World" />
ReactDOM.render(<DivWrapper child={ comp }/>, document.body);
And use { this.props.child } to render the component
JSFiddle here : https://jsfiddle.net/5c4gg66a/

React tutorial: Uncaught TypeError: Cannot read property 'data' of null

I'm following React tutorial at: http://facebook.github.io/react/docs/tutorial.html
I'm just after http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server
I went through similar questions on SO but not found a solution for my specific case.
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"},
{author: "Bob Lilly", text: "This is *another* comment 2"}
];
var Comment = React.createClass({
render: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
<br/>Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
React.render(
// <CommentBox url="comments.json" />,
<CommentBox data={data} />,
document.getElementById('content')
);
When I try to use data got from server (first step --> see 2nd link), I get this error:
Uncaught TypeError: Cannot read property 'data' of null
I guess this has something to do with passing data the wrong way.
EDIT: I edited the cod with the answers given so far
EDIT 2: Now it works with dumb data (var data = [ ... ) but not when got from the server

You're sending data as a prop to CommentBox and trying to pass it on through CommentBox state.
<CommentList data={this.props.data} />
instead of
<CommentList data={this.state.data} />
I usually reason about props this way; Props are stuff coming in and State is stuff that's already in.

Just adding that line will not get data from the server. You need to work all the way down to the end of the "Reactive State" section, creating the data file, and adding some ajax code to load the data.

You're sending data via props to CommentBox and checking for it in your CommentList component

React tutorial error rendering CommentForm and CommentList

I just started with the official React tutorial and I seem to be stumbling upon an error that prevents the browser from showing the content, it's probably some stupid typo, but I can't seem to find it. In the var CommentBox when I remove <CommentList /> and <CommentForm />, only the element <h1>Comments</h1> appears, but when I add them nothing appears in the browser, even the <h1>Comments</h1>. What am I overlooking, any ideas? Thanks!
My code
<div id="content"></div>
<script type="text/jsx">
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
</script>

You need to move your var declaration of "CommentList" and "CommentForm" to the top of the script tag, above "CommentBox". Because in javascript there are hoisting. I put an example in github: https://github.com/josemato/stackoverflow/blob/master/reactjs-tutorial/index.html

Passing props from grandchildren to parent

I have following React.js application structure:
<App />
<BreadcrumbList>
<BreadcrumbItem />
<BreadcrumbList/>
<App />
The problem is, when I click on <BreadcrumbItem /> , I want to change a state in <App />
I used callback to pass props to <BreadcrumbList/> but that`s how far I got.
Is there any pattaren how to easily pass props up to compenent tree ?
How can I pass prop to <App />, without doing any callback chaining ?

If you are doing something simple then its often just better to pass the change in state up through the component hierarchy rather than create a store specifically for that purpose (whatever it may be). I would do the following:
BreadcrumbItem
var React = require('react/addons');
var BreadcrumbItem = React.createClass({
embiggenMenu: function() {
this.props.embiggenToggle();
},
render: function() {
return (
<div id="embiggen-sidemenu" onClick={this.embiggenMenu} />
);
}
});
module.exports = BreadcrumbItem ;
THEN pass it up to the parent through the BreadcrumbList component.....
<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>
... and UP to App, then use it to set the state....
var React = require('react/addons');
var App = React.createClass({
embiggenMenu: function() {
this.setState({
menuBig: !this.state.menuBig
});
},
render: function() {
return (
<div>
<BreadcrumbList embiggenToggle={this.embiggenMenu} />
</div>
)
}
});
module.exports = BreadcrumbItem;
This example toggles a simple boolean however you can pass up anything you like. I hope this helps.
I have not tested this but it was (quickly) ripped from a live working example.
EDIT:
As it was requested i'll expand upon the vague: "you can pass up anything".
If you were making a navigation menu based on an array and needed to pass up the selected item to a parent then you would do the following
var React = require('react/addons');
var ChildMenu = React.createClass({
getDefaultProps: function () {
return {
widgets : [
["MenuItem1"],
["MenuItem2"],
["MenuItem3"],
["MenuItem4"],
["MenuItem5"],
["MenuItem6"],
["MenuItem7"]
]
}
},
handleClick: function(i) {
console.log('You clicked: ' + this.props.widgets[i]);
this.props.onClick(this.props.widgets[i]);
},
render: function() {
return (
<nav>
<ul>
{this.props.widgets.map(function(item, i) {
var Label = item[0];
return (
<li
onClick={this.handleClick.bind(this, i)}
key={i}>
{Label}
</li>
);
}, this)}
</ul>
</nav>
);
}
});
module.exports = ChildMenu;
You would then do the following in the parent:
var React = require('react/addons');
var ChildMenuBar = require('./app/top-bar.jsx');
var ParentApp = React.createClass({
widgetSelectedClick: function(selection) {
//LOGGING
//console.log('THE APP LOGS: ' + selection);
//VARIABLE SETTING
var widgetName = selection[0];
//YOU CAN THEN USE THIS "selection"
//THIS SETS THE APP STATE
this.setState({
currentWidget: widgetName
});
},
render: function() {
return (
<ChildMenu onClick={this.widgetSelectedClick} />
);
}
});
module.exports = ParentApp;
I hope this helps. Thanks for the upvote.

If you use Flux pattern, you can have a AppStore which listen a BREADCRUMB_CLICK event. So when you click on a BreadCrumbItem, you can execute an action which dispatch BREADCRUMB_CLICK event. When AppStore handle the event, he inform App component which update your state.
For more informations:
Flux architecture