We Keep Coding

How to set up cookie in react component

I have finished code a welcome box and that can be closed by clicking the button. This welcome is just a part of the page, now, I want to add cookie in this component, in order to achieve this welcome box will show up for only once for each browser.
I am newbie for cookie, any suggestion will help me.
var Child = React.createClass({
render: function() {
return (
<div className="container">
<p>Welcome to our website</p>
<button onClick={this.props.onClick}>close me</button>
</div>
);
}
});
var ShowHide = React.createClass({
getInitialState: function () {
return { childVisible: true };
},
render: function() {
return(
<div>
{
this.state.childVisible
? <Child onClick={this.onClick} />
: null
}
</div>
)
},
onClick: function() {
this.setState({childVisible: !this.state.childVisible});
}
});
React.render(<ShowHide />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

You can visit following link. You need to import react-cookie
How can I do to set cookie in the react code?

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/

ReactJs packery example

I am trying to get to grips with more complex reactjs components. One I example I would like to get working is this packery one
So this is the basic component for the Hellworld example
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
//jsfiddle
https://jsfiddle.net/7xzd92s5/4/
taking this forward I would like to get this packery example working - but how do I include the react-packery-mixin - is there a cnd for it. Is this example complete? https://tonicdev.com/npm/nexts-react-packery-mixin
var PackeryMixin = require('react-packery-mixin');
var packeryOptions = {
transitionDuration: 0
};
var Packer = React.createClass({
displayName: 'SomeComponent',
mixins: [PackeryMixin('packeryContainer', packeryOptions)],
render: function () {
var childElements = this.props.elements.map(function(element){
return (
<div className="someclass">
{element.name}
</div>
);
});
return (
<div ref="packeryContainer">
{childElements}
</div>
);
}
});
ReactDOM.render(
<Packer name="Packer" />,
document.getElementById('Packer')
);

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

ReactJS: Prettiest way to dynamically load Component within Modal

I want to create a clean & reusable Modal-component like so:
var Modal = React.createClass({
....
render: function() {
return (
<div className={ this.state.className }>
<div className="modal-opacity" onClick={this.toggle}></div>
<section className="modal-content">
<a className="close" onClick={this.toggle}><img src="/images/icon-close.svg" alt="Close" /></a>
<div>
{this.props.module === 'curriculum' ? <Curriculum /> : <Contact /> }
</div>
</section>
</div>
);
To keep it neat — I'd would like to load the modal-content as a Component based on the {this.props.module} value, that is coming from the initiator component.
Is there a better way of doing this? Something like <{this.props.module}/>? Or is this insecure? Maybe there's is already something in ReactJS built-in?

You can use this.props.children to render component's child controls. Like this:
var Control = React.createClass({
render: function() {
return <div>{ this.props.children }</div>;
}
});
var App = React.createClass({
render: function() {
return <Control><h1>child control</h1></Control>;
}
});