react-jsx

In my ReactJS project, currently I am saving the cookie like cookie.save('token', received_token, { path: '/'} ); and retrieving it from the local storage like so: cookie.load('token'); . So I was wondering, is a way to set expiration time when .save() the token received, and once expired, automatically have it remove itself from the local storage? Thank you and will accept the answer with vote up. You can pass maxAge or expires in options as 3rd parameter in cookie.save function Syntax: reactCookie.save(name, val, [opt]) Example: // maxAge Example reactCookie.save("token", "token-value", {

I have created three basic components. A renders both the components B and C B is like header containg tabs 1,2,3 C is the first page on which there are two forms, one shows at a time. On showing first form i need to show tab one 1 in B component. On showing second form i need to show tab 3 in B component. I just want to pass the data from C component on the basis of which form is showing to B component. I put state on C component and tried to use same this.state.data or this.props.data for no value coming in B controller. A.jsx import React from 'react'; import B from './B.jsx'; import C from

I've made a small fiddle to show the problem: http://jsfiddle.net/4TpnG/582/ When you have an input box with onBlur attached to it, and an initial value from state, input from the keyboard is blocked. When onChange is attached, it's working correctly. Why is this happening and how can this be solved? I would have expected it to accept the characters you type and update the state onBlur. var Test = React.createClass({ getInitialState: function() { return { value: "hallo" }; }, render: function() { return ( < form > < div > Onchange: < input type = "text" value = { this.state.value } onChange =

How can I use Jest to test React components written in CoffeeScript + React jsx? The only CoffeeScript example provided with Jest uses plain CoffeeScript, and doesn't work with CoffeeScript + React JSX (syntax error when it reaches a < ). What I have tried first attempt: execSync // preprocessor.js var execSync = require('exec-sync'); module.exports = { process: function (src, path) { return execSync('browserify -t coffee-reactify ' + path); } }; This works, but takes too much time (a good 12 seconds for a dummy test). Then I tried: second attempt: coffee-react-transform // preprocessor.js var

I currently have this simple react app and I cannot get these onchange events to fire for the life of me. var BlogForm = React.createClass({ getInitialState: function() { return { title: '', content: '' }; }, changeTitle: function(event) { var text = event.target.value; console.log(text); this.setState({ title: event.target.value }); }, changeContent: function(event) { this.setState({ content: event.target.value }); }, addBlog: function(ev) { console.log("hit hit"); }, render: function() { return ( <form onSubmit={this.addBlog(this)}> <div> <label htmlFor='picure'>Picture</label> <div><input

I've just started learning React and got stuck at this error. Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router Here is my code: var React = require('react'); var ReactDOM = require('react-dom'); var { Route, Router, IndexRoute } = require('react-router'); var hashHistory = require('react-router-redux') var Main = require('./components/Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}> </Route> </Router>, document.getElementById('app') ); The tutorial I was following uses React-Router 2.0.0, but on my desktop I'm using 4.1.1.

Is it possible to dynamically render a React component from a string? Basically I have pages' content coming from the database and I want to have React componentes within the content. An example of what I'm trying to achieve: var html_string = '<i>React Component Rendered</i>: <Hello name="World" />'; var Hello = React.createClass({ render: function() { return <strong>Hello {this.props.name}</strong>; } }); function createMarkup() { return {__html: html_string}; }; var App = React.createClass({ render: function() { return <div dangerouslySetInnerHTML={createMarkup()} />; } }); ReactDOM.render(

I'm extending a base class and overriding a method in the base class. But when I call it, it calls the super class version. How do I override the method? var Hello = React.createClass( { getName: function() { return "super" }, render: function() { return <div>This is: {this.getName()}</div>; } }); class HelloChild extends Hello { constructor(props) { super(props); console.log( this.getName()); } getName() { return "Child"; } }; I want it to print "This is: Child" but it prints "This is: super" I found the answer (adapted from here: https://gist.github.com/Zodiase/af44115098b20d69c531 ) - the