react-jsx

I've written a gulp task to compile my .jsx and .js scripts into a bundle using watchify and babelify as a transform. For some reason my gulp script seems to be choking on the transform and I'm not sure why: gulp.task('browserify', function() { var bundle = watchify(browserify('./app/jsx/client/index.jsx', { extensions: ['.js', '.jsx'], debug: process.env.NODE_ENV === 'development' })); bundle.transform(babelify); bundle.on('update', function() { rebundle(bundle); }); function rebundle(bundle) { return bundle.bundle() .on('error', function(error) { console.log(error.stack, error.message); this

When coding ReactJS I have to supply keys for dynamic children. For example: render() { const {options} = this.state const availableOptions = options.map(opt => { return ( <option key={opt.id} value={opt.id}>{opt.displayValue}</option>} ) } return ( <select onChange={this._onOptionSelect}> {availableOptions} </select> ) } I understand why they keys are there. But why do I have to give them? Couldn't react just assign a running number or UUIDv4 or something else? Related doc: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children Tl;dr You need to assign a unique key to

How do I render an indeterminate checkbox in JSX? Here's what I've tried: render() { return <input type="checkbox" checked={this.props.state === "checked"} indeterminate={this.props.state === "indeterminate"} /> } However, indeterminate is not an attribute on the HTMLElement , but a property . How do I set properties from React / JSX? You can use the componentDidMount step (which is invoked after the initial rendering) to set that property: componentDidMount() { React.findDOMNode(this).indeterminate = this.props.state === "indeterminate"; } If you want that property to be updated with

I'm using React with Redux and Material UI to build a webapp. The webapp is made of several pages and components. I know that a snackbar or dialog should be directly connected to what the user is doing. However, I'd like to make the snackbar and dialog independent on the pages and components. A use case therefore is displaying a message like background synchronization of your data failed and an action retry now . My idea was to render the snackbar on a page called RootFrame , which is used to wrap all other pages and to dispatch the text of the snackbar as payload of an action. My Redux action

I am experimenting React.js and it is working really well. I am wondering if it is possible to inject classes to other classes like so: var Container = React.createClass({ render: function() { <{this.props.implComponent}/> } }); Assuming implComponent has been passed like so: React.render( <Container implComponent="somePredefinedVariable" />, document.getElementById('content') ); This does not work because of a Syntax error. I can easily understand why. In other words I'd like to inject classes to other classes based on names. Is this possible? How can I do that? Brigand You were close. You

I was trying to change background image style dynamically for the following div: Here is my component for changing it, render: function() { var divImage = { backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc + ");" }; return ( <li> <div ref="image-pane" className="player" style={divImage}></div> </li> ) } Thanks for the help daniula You haven't specified when would you like to change backgroundImage , so I've created version which changes it with onClick : React.createClass({ getInitialState: function () { nextImg: false, }, handleClick: function () { this

I'm trying to replace parts of a string with JSX tags, like so: render: function() { result = this.props.text.replace(":",<div className="spacer"></div>); return ( <div> {result} <div> ); } But given that this.props.text is Lorem : ipsum , it results in <div> Lorem [object Object] ipsum. </div> Is there a way to solve this or another way to replace parts of a string with JSX tags? When you pass a JSX element to replace() as the second argument, that element is converted to a string because replace() expects a string as a second argument. What you need to do is convert your string to an array