FAQ Database Discussion Community


How can I get simulated react events to update the values of the ref in my component?

javascript,unit-testing,testing,reactjs,reactjs-testutils
So I have a react component that looks something like this: class SignInForm extends React.Component { constructor(props) { super(props); } onFormSubmit(event) { const username = React.findDOMNode(this.refs.username).value; const password = React.findDOMNode(this.refs.username).value; // very basic validation if (username && password.length > 6) { this.props.flux.signIn({ username, password }); } event.preventDefault(); } render() {...

TypeError: this.props.data.map is not a function, but data is a list

javascript,reactjs
I have written code from the ReactJs site here while working through their comment box tutorial. Yet for some reason it is giving me an error about map: Uncaught TypeError: this.props.data.map is not a function Specifically it is complaining about line 7: var commentNodes = this.props.data.map(function (comment){ .. etc.. }...

Get font color of ReactJS element

css,reactjs
I have a React component, a button, and I need to set the background-color of a child element to the color of the button. I know that you're not supposed to call this.refs.myElement.getDOMNode() in the render() function, so I'm not sure how I'm supposed to lay this out. At the...

Changing the state of a component that isn't directly handling the event in ReactJs

javascript,reactjs
To better understand my question, take a look at my component diagram: https://app.box.com/s/rkq9bhyzs00971x6xgpq8exmvu4zzjlt By looking at the image, you can see I essentially have a component structure of Browse Widget -Main Menu -Display -SubMenu -SubCategory -SearchBar -Video Display My Display Component houses all the components that pull from an API....

modifiy multiple react components on trigger

javascript,reactjs
I have input forms which I use on several places on my single-page website. There is a single react-component class named Subscribe which contains the whole <form> allowing the user to enter a email and subscribe to my newsletter. When the user submits subscribes in any <Subscribe>, I want to...

ReactJS - Custom Dropdown

reactjs
I have a drop down that has a nested ul in ECMAScript 6. Relevant code for dropdown: ...... handleItemClicked(item){ alert(item) } render(){ return( .... <UnorderedList whenItemClicked={this.handleItemClicked} /> .... ) } Relevant code for unordered list: return( <ul> .... {this.props.dropItems.map(function(item){ return (<li onClick={this.props.whenItemClicked(item)} key={item}><a>{item}</a></li>) }, this)} </ul> ) Result: There are...

Should I pass all the state in every change from store to component?

javascript,performance,reactjs,reactjs-flux,flux
I am new on React and Flux and I am making an app that will have an input (like the name or the title), and below a list of n things. How should I handle the event listeners? I saw in the TODO example of flux (https://github.com/facebook/flux/blob/master/examples/flux-todomvc/) that they use...

React page layout using react-router

javascript,reactjs,react-router
I have a default layout page here using react router: Header = require('./components/Header'), Footer = require('./components/Footer'), var sampleApp= React.createClass({ getDefaultProps() { return { title: 'Page One' }; }, render: function (){ return ( <div className="app"> <Header title={this.props.title} /> <RouteHandler /> <Footer /> </div> ); }, }); var routes = (...

How do I set state of sibling components easily in React?

reactjs,siblings
I have got the beginnings of a clickable list component that will serve to drive a select element. As you can see from the below, onClick of the ListItem, I'm passing the state of a child element (ListItem in this case) to the parents (SelectableList, and CustomSelect component). This is...

Rx.js React extension testing stream and intermediate results

unit-testing,reactjs,rxjs
I have a module which stores data in this.store and takes keyboard events in this.stream The relationship between this.store and this.stream is as follows this.stream.subscribe(function(keyCode){ this.store.add(100) }); Now I am writing test cases against those events. I want to know when I click the keyboard 3 times respectively what will...

Adding multiple divs or renders in ReactJs

javascript,web-applications,reactjs,react-jsx
I'm having trouble in wanting to create multiples of the same html that I render in a certain class. For example, I have a div that might look like this [Header goes here, is a input field] [Dropdown] [TextArea] [Submit] [Add another field] On add another field, I would like...

Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null

javascript,ajax,reactjs
I am doing 2 basic ajax calls to 2 different apis in one of my ReactJs components. Although, when running the call (on urls I know for certain are working and returning data), I receive: Uncaught TypeError: Cannot read property 'groupsData' of null Here is the single component: var BrowseWidgetBox...

Custom react dropdown component re-rendering on every user input

javascript,reactjs,reactjs-flux,react-jsx
I'm having a bit of trouble with controlling the amount of re rendering done by React. Say I've got this user input right here: handleFirstNameChange: function(e) { this.setState({ firstName: e.target.value, userTyping: true }); }, render: function(){ <RB.Input value={this.state.firstName} onChange={this.handleFirstNameChange} name="" type="text" label="First name" placeholder="First name.."/> } And this custom dropdown...

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...

React issue with updating state during re-render

javascript,reactjs
I have 2 components, a StaticComponent and an InteractiveComponent. The StaticComponent shows the user's information. It has a link to edit the information. That link has an onClick that fires off the handleEditClick function. This replaces the StaticComponent with an InteractiveComponent which has a form. var StaticComponent = React.createClass({ handleEditClick:...

Running into problems using React Datepicker with rails

javascript,ruby-on-rails,datepicker,reactjs
I am using this datepicker plugin for react: https://github.com/Hacker0x01/react-datepicker I keep getting the following error: Uncaught TypeError: this.props.moment is not a function in react-datepicker.min.js. I just copied the example code, and I can see the input field, but whenever I click on it to render the calendar, it keeps giving...

Dynamic className in cjsx

coffeescript,reactjs
I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow: {<MyAwesomeComponent /> unless @state.hide} And I change the state by doing: toggleComponent = -> @setState hide: [email protected] . . ....

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack

javascript,node.js,npm,reactjs,webpack
I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

JQuery .animate() not working with ReactJS?

jquery,reactjs
I am trying to highlight a cell when the user click on it by using jQuery .animate() clickHandler: function() { var cell = React.findDOMNode(this.refs.cell); // $(cell).css("background-color", "blue"); // THIS WORK $(cell).animate({ backgroundColor: "blue" }, 1000); // THIS DOESN'T WORK }, I am also using React.addons.CSSTransitionGroup. Maybe there is a conflict...

React animation / ReactCSSTransitionGroup

reactjs
How would you make the following link - a spinner - work with reactjs http://codepen.io/awesome/pen/znGwr I am using webpack: { test: /\.css$/, loader: "style-loader!css-loader" } I know the css is working from other settings. I have tried the following, using the same css file(copy paste into local css ). Updated:...

Nesting in Default Route

javascript,reactjs,react-router
I have an applications index page that lists all my applications. The index page is also the default route. I want to nest a 'applications new' modal in the index page. This way I can render the modal while on top of the index page. However, I'm not able to...

ReactJs tries to attach onclick handler before Ajax loads element

javascript,ajax,reactjs
I am creating a dynamic list for a menu in ReactJs. The data for each menu item is bing pulled in from a JSON file via AJAX. I want the menu to close when a menu item is clicked. I am giving the whole list the prop "whenClicked" when one...

Hide context menu on outside click

javascript,reactjs
I have a context menu that appears when you right click inside the <div>, and it only goes away if the user click left click inside the <div> again. How do i hide it when a user click anywhere on the page? my fiddle...

ReactJS localhost Ajax call: No 'Access-Control-Allow-Origin' header

javascript,ajax,node.js,localhost,reactjs
Working on the ReactJS tutorial I spinned up a local server with >npm install -g http-server >http-server -c-1 And got local server working fine located at http://localhost:8080 Though, when I attempted to use an AJAX call within one of my components, I got the following error in my chrome console:...

html Forms inside reactJS

javascript,html,reactjs
I used the (almost) exact syntax for creating an html form in react: var Hello = React.createClass({ render: function() { return <div> <section> <form action="http://localhost:9203/ask"> Text: <input type="text" name="text" value="Text"/> <br/> Focus: <input type="text" name="focus" value="Focus"/> <br/><br/> <input type="submit" value="Submit"/> </form> </section> </div>; } }); React.render(<Hello name="World" />, document.getElementById('container'));...

Better/faster way for changing React array state than cloning it?

reactjs
Whenever a React class has a state object that is or contains an array, updating that state feels awkward. Usually what I do is var newArrayThing = _.clone(this.state.arrayThing); //or slice() newArrayThing[123] = 42; //update stuff this.setState({arrayThing: newArrayThing}); Is there a better or more elegant way of handling this I am...

Page update when clicking a button (reactjs)

javascript,reactjs
Suppose I want to render page again, after clicking a button. How can I accomplish it? In particular how would you change my program to generate random texts, when clicking the button? var colors = ['red', 'yellow', 'blue', 'green']; var Hello = React.createClass({ randomText(color) { var style = { color:...

React Rails component: manually triggering a re-render

javascript,jquery,ruby-on-rails,reactjs,react-rails
In Rails, I've got a set of Bootstrap tabs on a page with a React component on each one, ie: <div id="tab-1" class="tab-pane"> ... <%= react_component('PeopleWidget', person_id: @person.id) %> ... </div> <div id="tab-2" class="tab-pane"> ... <%= react_component('ContentWidget', content_id: @content.id) %> ... </div> The components: Do not talk with each other...

Why calling react setState method doesn't mutate the state immediately?

javascript,reactjs,react-jsx
I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange usage (JSBIN). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/>...

ReactJS - how to use comments

reactjs
Can you not use comments inside the render method? I have the following component: 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick(){ alert('I am click here'); } render(){ return( <div className="dropdown"> // whenClicked is a property not...

React Flux dispatcher vs Node.js EventEmitter - scalable?

node.js,design-patterns,reactjs,flux,eventemitter
When you use Node's EventEmitter, you subscribe to a single event. Your callback is only executed when that specific event is fired up: eventBus.on('some-event', function(data){ // data is specific to 'some-event' }); In Flux, you register your store with the dispatcher, then your store gets called when every single event...

hooking up the data model in ReactJS - syntax

reactjs
I'm looking off of the reactjs tutorial on how to build a comment box with react. I get that we are mapping over data, but I cant understand this syntax and part of the code. Would be really helpful if you could explain exactly what is going on here. Specifically,...

React select onChange is not working

javascript,reactjs
JsFiddle : https://jsfiddle.net/69z2wepo/9956/ I am returning a select element in the render function in my react.js code. But whenever I change the select value, the function in the onChange is not getting triggered. var Hello = React.createClass({ render: function() { return <select id="data-type" onChange={changeDataType()}> <option selected="selected" value="user" data-type="enum">User</option> <option value="HQ...

React - superagent request per mapped item

javascript,reactjs,superagent
I would like to fire off a superagent request for each item mapped in my search results. To check if the item id is in an array: I have these methods; one to map the results, and the other a superagent fetch: renderResultNodes: function () { if(!this.props.results) return; return this.props.results.map(function...

Expected corresponding JSX closing tag for input Reactjs

javascript,reactjs,reactjs-flux,react-jsx
While creating a component in Reactjs with input fields error occurs Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div> var Main = React.createClass({ render: function() { return ( <div className="card-action"> <i class="mdi-action-account-circle prefix"></i> <input id="icon_prefix" type="text" class="validate"> </div> ); } }); ...

JS - How to update DOM in realtime across multiple instances of the same web app?

javascript,jquery,reactjs,ractivejs,real-time-updates
I am building a massive real-time collaboration web application. It is a Web IDE that has support for HTML, CSS & JS programming and a stage area that would reflect the results a la JSFiddle, Plunker etc. Now, the twist is that, it would support multi-user real-time collaboration, where people...

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: $...

reactjs Uncaught TypeError: Cannot read property 'map' of undefined

javascript,jquery,ajax,reactjs
I have used getInitialState on my BrowseWidgetBox component. Although when passing the data to my MainMenu component, the data remains empty, as if the AJAX call to the api was never run in the BrowseWidgetBox. My question then, is why is this happening? Shouldn't componentDidMount call the ajax api and...

conversion of string to JSON object in javascript with eval() [duplicate]

javascript,reactjs
This question already has an answer here: Eval() = Unexpected token : error 7 answers I am converting the following JSON variable to string, and back to JSON, and getting error (in ReactJS, although it shouldn't be important) var questionGlobal = { "questionCons": [{ "string": "In", "alignment": 2 },...

react server side rendering with client side routing

javascript,reactjs,single-page-application,isomorphic-javascript
An initial server rendering for my homepage route ( / ) works fine. Also, subsequent client side navigation to ( /#/page2 ) works fine. However, if I load /#/page2 directly from the address bar, the server rendered homepage loads in the browser first and then visibly transitions to /#/page2, which...

React and real DOM cooperation in LeafletJS

javascript,reactjs
I am trying to use React with the leafletjs library for maps and I am not sure how to implement this best. I know that there is a react-leaflet github project out there, but in my case I need to use the raw (javaScript) leafletjs library (in order to use...

Passing an element vs. a react class to an optionally displayed modal

reactjs,react-bootstrap
I have a table cell that the user can click on which will launch a react-bootstrap modal that displays additional details. The modal displays a component that has its own state and may trigger an action to pull data from the back-end if the store doesn't have the data it...

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 }); },...

React - saving a component in the ref callback

reactjs
So, extract from https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute The ref attribute can be a callback function instead of a name. This callback will be executed immediately after the component is mounted. The referenced component will be passed in as a parameter, and the callback function may use the component immediately, or save the reference...

Can I use Backbone with React Native?

javascript,ios,backbone.js,reactjs,react-native
I have found several different examples of integrating React (View) with Backbone on the web, but not any to do the same with React Native. I was wondering if this was possible and also if there were any samples to play with. This (https://github.com/magalhas/backbone-react-component) also seemed a good starting point,...

react.js dynamically grabbing object resulting in undefined

javascript,reactjs
I am learning react.js. I have an object literal and I am trying to dynamically select an object within an object based upon what was chosen from a select input. I am getting undefined, however. I have tried both dot and bracket notation. I am successfully grabbing the value of...

Delayed rendering of React components

javascript,reactjs
I have a React component with a number of child components in it. I want to render the child components not at once but after some delay (uniform or different for each of the children). I was wondering - is there a way how to do this?...

React js css transitions on class removal

twitter-bootstrap,reactjs,css-transitions
I have column that should have different width depending on some flag. I use Bootstrap, so I assign col-xs-12 and col-xs-2 depending on the flag. Now I want it to change width slowly with css transition. I've read official React.js doc about transitions, but it doesn't apply to my case:...

Trying to understand how an isomorphic react app is supposed to do client-side routing

reactjs,client-side,isomorphic-javascript
Pardon my English, it is a second language. The whole point of an isomorphic app, as opposed to a regular client-side SPA is so the client doesn't have to download the whole JS file initially which results in really slow initial load time. I've been trying to teach myself server-side...

React self-modifying component with proper state/props

javascript,reactjs
I'm working on a pet project right now and I decided to use React for the view. I'm fairly far into developing it but I'm just starting to realize that I might not understand how to use React very well because it seems like in order to do simple things...

props is not initialized in react component

reactjs,flux
I have developed a Component. In it, I am loading the data based on an Id which is passed to it like; my Item Component code looks like ItemStore.CallItem("TenantId",this.props.MetaItemId); and my calling page code looks like <div className="box-body table-responsive no-padding list-relations" id="configureMM"> <Item MetaItemId={11} /> </div> <div className="box-body table-responsive no-padding...

What is the proper way to get the value of a React