FAQ Database Discussion Community


Pass Parent Prop to Children reactjs

javascript,reactjs,jsx
I have a Legend, which contains multiple Legend.Items children. I'm having a problem where currently onClick it is possible to deselect all of the Legend Items which has consequences that I'd like to avoid. Is it possible to set some sort of onClick handler in the Legend component that can...

Iterating through a JSON response in JSX Render for React.js

javascript,json,reactjs,jsx,react-jsx
I'm trying to create a table from a JSON response formulated from a submitted form, therefore the initial render needs to be blank, but this blank state is proving to be an issue. The issue is complicated further by the fact that the response could have different headers, number of...

If the props for a child component are unchanged, does React still re-render it?

javascript,reactjs,jsx
Suppose I have the following pairing of parent and child components in React: var ChildComponent = React.createClass({ getDefaultProps: function(){ return { a: 'a', b: 'b', c: 'c' } }, render: function() { return ( /* jshint ignore:start */ <div className={'child' + (this.props.b ? ' modifierClass' : '')} something={this.props.a}> {this.props.c} </div>...

How to quit Illustrator and ExtendScript Toolkit from a script?

javascript,adobe-illustrator,extendscript,jsx
I use a .jsx script to open an Illustrator file, modify it, then save and close it. The script is called from another program. After the script execution, I need to quit both Illustrator and ExtendScript Toolkit softwares. I tried the following code: [...] document.close(); app.quit(); // quitting Ai Illustrator...

Configure gulp task to move files to subfolder

gulp,jsx
I need to move compiled jsx->js files from: ./Scripts/lib/xyz/components (jsx starts here) to ./Scripts/lib/xyz/components/build (.js should end up here) My current gulpfile is var gulp = require('gulp'); var react = require('gulp-react'); var watch = require('gulp-watch'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); var libPath = "./Scripts/lib"; gulp.task("default", function() {...

How does Facebook's React JSX transformer work?

javascript,xml,facebook,jsx
How is it even possible that React allows you to write JSX (XML) within javascript without it throwing any errors? I have been trying to wrap my head around it, and I am not quite sure how the underlying code accomplishes this.

React.js: Disable button when input is empty

reactjs,jsx
I'm new for React.js, sorry if the question sounds too stupid for you. I'm trying to disable button when input field is empty. What is the beest approach in React for it? I'm doing something like so: <input ref="email"/> <button disabled={!this.refs.email}>Let me in</button> Is it correct? It's not just duplication...

Warning: Unknown DOM property class. Did you mean className?

javascript,reactjs,jsx
I've just started exploring React with a scaffolded Fluxible project. I've changed my Application component to contain following render function: render() { return <div class="myApp"></div> } When I run the app in dev mode (npm run dev), I get the following error: Warning: Unknown DOM property class. Did you mean...

Compiling jsx files on windows

reactjs,jsx
I have installed react-tools using npm: npm -g install react-tools I have a folder called "test", under which I have the folder containing the .jsx files, called "a1", and a destination directory to hold the .js files, called "a2". So I do this: c:\test> jsx -w a1 a2 and it...

React-Flux: Error with AppDispatcher.register

javascript,jsx,reactjs-flux,react-jsx,flux
I am trying to set up the most basic app in Flux-React. Its sole goal to is fire an Action, which gets sent through the Dispatcher to a Store that has registered with the Dispatcher. The store the logs the payload to Console. Everything besides the Store is working well,...

React: How to navigate via clickHandlers?

javascript,reactjs,jsx,react-jsx
I just started learning React and I'm stuck in the following scenario. There is an input field and on clicking the search button it takes the input value and redirect to /search/search-query/some-action I have setup the path, defined the route to the correct view. And, I was able to do...

Leading Underscore transpiled wrong with es6 classes

javascript,requirejs,reactjs,ecmascript-6,jsx
I am experiencing a really weird behavior and can't even say which package to blame for it. My setup: RequireJS project with the JSXTransformer and the jsx! plugin I have an es6 class like this: define([ 'react' ], function( React ) { class MyComponent extends React.Component { myMethod() { otherObject.someMethod()._privateProp;...

How to use Variables in setState in JSX

javascript,reactjs,jsx,react-jsx
I would like to use a variable in the setState function in a JSX file for React. How would I restructure this code: var name = e.target.name; if(name == "title"){ this.setState({ title: e.target.value}); } else if(name == "date"){ this.setState({ date: e.target.value}); } else if(name == "amount"){ this.setState({ amount: e.target.value}); }...

Replace part of string with tag in JSX

reactjs,jsx,react-jsx
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...

String comparison not as expected

javascript,jsx
I have written the following code looking for a string token in an array. var parseCSVLines = function(lines) { var valueObj = {}; var delim = ','; var isLayer = false; var isGroup = false; for(var i = 0; i < lines.length; i++){ //skips CR/CF lines if(!lines[i]) continue; //only data...

How to use nodemon with JSX?

node.js,reactjs,jsx,nodemon
I can compile and run my JSX app with one command: jsx app.jsx | node But I also want my server to automatically restart every time I modify app.jsx. I can do that with nodemon, but I can't quite figure out how to get nodemon to run my script through...

Require jsx files without specifying extension

javascript,reactjs,browserify,jsx
I am using browserify and watchify, and would like to require() files other than the default extensions .js and .json without specifying the extension, for instance: // Not ideal (tedious) var Carousel = require('./components/Carousel/Carousel.jsx') // Ideal var Carousel = require('./components/Carousel/Carousel') I have tried --extension=EXTENSION as specified in the browserify documentation:...

React/reflux how to do proper async calls

javascript,asynchronous,reactjs,jsx,refluxjs
I recently started to learn ReactJS, but I'm getting confused for async calls. Lets say I have a Login page with user/pass fields and login button. Component looks like: var Login = React.createClass({ getInitialState: function() { return { isLoggedIn: AuthStore.isLoggedIn() }; }, onLoginChange: function(loginState) { this.setState({ isLoggedIn: loginState }); },...

How to Render Mutliple tr Rows in React

javascript,reactjs,jsx
I am stuck with this, when i am running the code is get this error. Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>,...

Can you force a React component to rerender without calling setState?

reactjs,jsx
I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With a top-level React.render this has been possible, but within a...

React.js - interpolate JSX with expression in string

reactjs,jsx
Looking to achieve the following: <div className="total total-{obj.state}"> Obviously this compiles to: <div class="total total-{obj.state}"> Is there an elegant way in JSX to evaluate the expression in the {} within a string?...

JSX/Photoshop: app.activeDocument.saveAs() returning error

javascript,runtime-error,photoshop,photoshop-script,jsx
I'm trying to save the activeDocument as a .psd but its returning this error ERROR: General Photoshop error occurred. This functionality may not be available in this version of Photoshop. my script: #target photoshop var fileRef = new File(app.path.toString() + "/Samples/template.psd"); var docRef = open(fileRef); //target text layer var layerRef...

Iterate over all refs values in component

javascript,reactjs,jsx,react-jsx
I am trying to access all ref values in my component and do something with them (for example, create payload to send to a server) I was trying to do a simple for..in loop and than use getDOMNode().value on every ref but it doesn`t work. var Hello = React.createClass({ getAllRefsValues:...

Using an input field with onBlur and a value from state blocks input in Reactjs JSX?

reactjs,jsx
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?...

React/JSX dynamic component names

javascript,reactjs,jsx,react-jsx
I am looking to render a component based upon a string. Essentially, I am hoping to find the JSX equivalent to JavaScript's dynamic function name ability (parent["childMethod"]). So, if I have a string, such as "<MyComponent />", how can I turn into JSX and render?...

How to use If-Else in JSX

javascript,reactjs,jsx,react-jsx
I understand how to use it in simple situations: {(this.state.show) ? <span>Show</span> : null} But how to use it for big DOM? { if (this.state.show) { <span className={this.state.className}>Hi</span> {this.state.text} } else { {this.state.text} } } Of course, it doesn't work. How to do it correctly? ...

jsx command not found on mac terminal

node.js,npm,reactjs,jsx
Problem: I execute the following command from the macintosh terminal: $ jsx --watch src/ build/ I recieve the following output error from the terminal: -bash: jsx: command not found Relevant information: I am following the following tutorial: https://facebook.github.io/react/docs/getting-started.html I executed the following command from the tutorial with positive output: $...

React.js table: remove row button visually removes incorrect row

reactjs,jsx,react-jsx
I am using React.js to dynamically create a html table containing text boxes. I have rows that can be removed by a button click. I expect, when I click "remove" on the first row that the table re-renders with row 1 removed. However, when react re-draws the table, it looks...

Explain question mark (?) used in ES6/JSX code

reactjs,ecmascript-6,jsx
I'm using a library called react-forms in my React app. To better understand how it works I've been reading the code, but a convention keeps popping up which confuses me. Here's the ES6/JSX code: 'use strict'; var React = require('react/addons'); var cx = React.addons.classSet; var Checkbox = React.createClass({ propTypes: {...

Based On Styling Indesign Javascript Scripting CC

javascript,scripting,indesign,jsx
I would like to know how I can set ( either directly or some other alternative method ) the style property of "Based on" using javascript within adobe InDesign CC. If I could also ask for documentation leading to an answer for reference it would be immensely appreciated. My code:...

How do I add a component after an submit event using ReactJS?

reactjs,jsx
I am trying to add add a component after a submit event from another component. var Extention = React.createClass({ render: function(){ alert("Enters the function"); return( <div id="fitnesse-panel"> this is where my second form code is located </div> ); } }); var FormButton = React.createClass({ handleSubmit: function(e) { e.preventDefault(); return (<Extention/>);...

how to include reactr jsx files on the the fly instead of all in one go with the reactrouter?

reactjs,jsx,react-router
// This is straight from the overview.md in the react-router docs var Router = ReactRouter; var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; var Route = Router.Route; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render: function () { return ( <div> <header> <ul> <li><Link to="inbox">Inbox</Link></li> <li><Link to="calendar">Calendar</Link></li> </ul> </header>...

How to concatenate JSX components in React Native

jsx,react-native
For example, I wanna show a list of names. So I wanted to do something like this: var returnValue; for (eachName of _names) { returnValue += ( <TouchableHighlight onPress={() => this._onPressButton}> <Text> {eachName} </Text> </TouchableHighlight>); } return returnValue; However, that is not valid. Which brings me to my question: How...

How to add keys the proper way to this react code

javascript,reactjs,jsx,react-jsx
I get warnings about missing keys on GridRow in the following code. I have read about it but I do not find a way to apply it to the react component? It seems like I have to do it in the final render method but I dont have any data...