FAQ Database Discussion Community


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

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

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

ReactJs w/ ECMAScript 6

reactjs
I have the follow component (radioOther.jsx): 'use strict'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn =...

React.js - Setting initial state and defining props which utilize that state within a component

reactjs
I have read: ReactJs: How to pass the initial state while rendering a component? ReactJS: Why is passing the component initial state a prop an anti-pattern? Am still having trouble resolving this issue. Namely - rendering an array of child component declarations with props that rely on the initial state...

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

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

How to test interactivity of React component using D3 select()?

javascript,svg,d3.js,reactjs
I have a React visualization component (Using SVG) that displays a tooltip on mouseOver, using the d3.select() function to modify a class on the tooltip element so that it becomes visible (And invisible on mouseOut): _handleMouseOverEvent: function() { d3.select('#' + this.props.caption).classed('hidden', false); d3.select('#' + this.props.caption).classed('visible', true); } _handleMouseOutEvent: function() {...

Multiple React components in a single module

reactjs,gulp,browserify
I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components...

Reactjs - the spread operator giving error

javascript,reactjs,react-jsx
I am trying to use the spread operator in react.js but getting the error Unexpected token ... in Chrome. I am getting an error at the line 3 in this code: var Btn=React.createClass({ render: function(){ var { className, ...other }=this.props; return (<a {...other} className={joinClasses(className,"btn")} href="#" >{this.props.children}</a>); } }); and using...

How to access nested object in React js 0.13.3

javascript,jquery,html,reactjs
The below added code is working fine in React js 0.10.0. I wanna run same code in 0.13.0 version also. My main requirement is accessing nested object as default object like "this.state.data.query.results.channel.item.condition.temp". <!doctype html> <html> <head> <title>Weather Widget</title> <link rel="stylesheet" href="weather.css" /> <script src="http://fb.me/react-0.10.0.js"></script> <script src="http://fb.me/JSXTransformer-0.10.0.js"></script> <script...

Django Rest Framework + React + Reflux: Can't GET new objects

django,reactjs,django-rest-framework,refluxjs
I'm trying to post a new object via a React form using a Reflux action. That part is working fine. The object is posting as expected, however, when I try to GET that object programmatically, it doesn't seem to be accessible unless I log out, restart my local server, or...

ReactJS: How to optimise top-down render flow

javascript,reactjs,scalability,reactjs-flux
Looking at Facebook's Flux TodoMVC example (https://github.com/facebook/flux/tree/master/examples/flux-todomvc/) makes me wonder how this approach scales. In the example the store is updated onBlur/Enter keypress of a new entry, but what if we wanted to update an existing entry on keypress? i.e. you type something in an input and this is persisted...

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

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

Canvas element does not resize when using ReactJS and PaperJS together

javascript,html,canvas,reactjs,paperjs
I have found that canvas elements correctly resize on window resize when they are inside react components. They also resize correctly when used with PaperJS. However, they do not resize when used with PaperJS and ReactJS together. Is this an incompatibility between PaperJS and ReactJS or am I instantiating PaperJS...

difference between componentDidMount and getInitialState in Reactjs

facebook,reactjs,flux
I understand that getInitialState is called once in the component's lifecycle and componentDidMount is called when the component is rendered. So does that mean both will get called just once in the component's lifecycle? What's the difference?...

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

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

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

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

ReactJs - Using Mixins with ES6

reactjs
Following up on Egghead.io's video - 'React Components in ES 6 classes', the below works: 'use strict'; import React from 'react'; import Button from './components/form/button'; import Label from './components/form/label'; // after refactoring //import ReactMixin from './super-classes/react-mixin'; //ToDo: Reactor below let reactMixin = InnerComponent => class extends React.Component { constructor() {...

Input validation setTimeout in ReactJS

javascript,css,validation,reactjs,ecmascript-6
I have a component that renders with className="error" or classname="" depending on whether the input is valid or not. This way in CSS I can simply do .error { background: red; }. The validity of the input is determined by the isValidNumber(..) function. However, right now the problem I'm having...

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

Using react-router and express with authentication via Passport.js - possible?

javascript,node.js,express,reactjs,passport.js
So I'm working on a project that incorporates React, Express.js+Passport and Webpack. I understand the concept of pushing everything to a 'master' React component via react-router, then letting it hash out what gets displayed for the given route. That would work great here, I think. To be upfront, I am...

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

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

Create CRUD UI in reactjs with backend api

javascript,laravel,reactjs,react-router
Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this. So far i have created a table component that displays all the users with react. how should i...

TouchableHighlight won't accept press events while keyboard is open

javascript,reactjs,react-native
I have a component which contains a TextInput and a TouchableHighlight side by side. You tap on the textbox, type what you want, then tap the add button to save it. Now the problem is the keyboard open from typing, you need to dismiss it, otherwise the button won't respond....

How do I load SVGs directly in my React component using webpack?

svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

Why should addChangeListener be in componentDidMount instead of componentWillMount?

javascript,reactjs,reactjs-flux,flux
I saw this line as an answer to another question on here: "componentWillMount should be componentDidMount, or else you'll leak event emitters in node." and I don't really understand it. Can someone explain with more detail? More info: Building a react application with flux, as part of the initial render,...

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

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

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

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

Why is my setState is not working? [duplicate]

javascript,reactjs
This question already has an answer here: Using a variable for a key in a JavaScript object literal 3 answers I have a react component that I have created. In this component, I call a function that updates the state generically: updateCheckbox: function(name, value) { this.setState({name: value}); }, I...

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

How to keep only one radio button selected with React

radio-button,reactjs
Im trying to learn React by doing a small application with it. My application has two radio buttons and I would like to keep always only one of them checked, but cannot seem to figure out how to uncheck the other button when I select the other one. Instead they...

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

Error: Cannot resolve module 'module' in path/…/rewire/lib

reactjs,flux
I am using rewire prior to require method in my React/Flux app, to load components. But after installation I got this error: ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'module' in /Users/path/node_modules/rewire/lib @ ./~/rewire/lib/rewire.js 1:13-30 ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'fs' in...

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

ReactJS code with and without class definitions: which one is preferred?

javascript,reactjs
Structurally, how different are these two code? Aren't they (almost) equivalent? In what situations one is preferred over the other? var Hello = React.createClass({ render: function() { return ( <div>Hello World</div> ); } }); React.render(<Hello />, document.body); and class SampleApplication extends React.Component { render() { return ( <div>Hello World</div> );...

After scrolling on IPad, some content of my website is hidden behind a white area

javascript,html,ios,css,reactjs
Introduction We're developing a website and on one page we'd like to display some simple charts. Therefore we're using canvas to draw the charts. I konw there are other great libraries therefore, but right know we just need a quick and dirty solution for a first shot. Generally we work...

How to append to dom in React?

javascript,reactjs
Here's a js fiddle showing the question in action. In the render function of a component, I render a div with a class .blah. In the componentDidMount function of the same component, I was expecting to be able to select the class .blah and append to it like this (since...

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

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

Ajax success issue with React and Rails

ruby-on-rails,ajax,reactjs
I've got a form that I am trying to handle with React. This is the ajax method in the handleSubmit function: $.ajax({ data: formData, dataType: "json", url: '/requests', type: "POST", success: function(data, status, xhr) { console.log('SHOW HERE ON RESPONSE'); this.setState({ formSubmitted: true }); } }); When I click on submit,...

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

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

how to render through a simple for-loop in Reactjs?

javascript,reactjs,flux
I have a simple react component defined below React.createClass({ generateContent:function(){ for(i = 1;i<=100;i++) if(i%2 == 0) { return <li>Even!</li> } else{ return <li>Odd!</li> } }, render:function(){ return (<ul> {this.generateContent()} </ul>) } }) While Rendering, The component returns the first statement of the for loop(<li>Odd</li>) and then exits. I'd like something...

react-router link to sub route

javascript,reactjs,react-router
How do I create a link for sub route like lang -> python ? My routes var routes = ( <Route name="app" path="/" handler={ App }> <Route name="info" handler={ Info } /> <Route name="home" handler={ Home } /> <Route name="lang" handler={ Lang } > <Route path="java" handler={Lang}/> <Route path="python" handler={Lang}/>...

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

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

ReactJS Updating Array

javascript,reactjs
I'm currently starting to learn ReactJS and have run into some trouble updating an array. Currently I have a searchable list of contacts which is working fine. But using the input box below the list I am trying to add additional items to the list using the update() function. Sample...

ReactJS component not rendering textarea with state variable

javascript,textarea,reactjs
I am facing an intriguing bug in React. I have this component: 'use strict'; import SummaryStore from '../stores/SummaryStore'; import React from 'react'; export default class ChangeSummaryForm extends React.Component { constructor() { // store initialisation SummaryStore.register(); var vRating = SummaryStore.getBookForSummaryPrint().summaryRating; var vStarClassName = this.getRatingClasses(vRating); this.state = { sStarClassName: vStarClassName, sCurrentBookToShow: SummaryStore.getBookForSummaryPrint()...

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

checking for first key in map with reactjs

javascript,reactjs
I've got the following component in ReactJS var MainMenu = React.createClass({ render: function() { console.log(this.props.groupsData); var categories = this.props.groupsData.objects.map(function(obj){ return (<li><a href="#">{obj.display_name}</a></li>); }); return (<div className="MainMenu"> <ul className="nav nav-pills">{categories}</ul> </div>); } }); Now, I wish to add className='active' to the <li> element if its the first in the map. How...

Encapsulation with React child components

coding-style,reactjs,encapsulation
How should one access state (just state, not the React State) of child components in React? I've built a small React UI. In it, at one point, I have a Component displaying a list of selected options and a button to allow them to be edited. Clicking the button opens...

React Component with subcomponents or render HTML in parent?

reactjs
I have a question regarding React patterns. When rendering a component, is it appropriate for this component to render several sub-components, or is it ok to render some HTML in the parent component. Example: If I have a box that has a heading and a body with list of elements,...

Should every object in the store state be immutable?

javascript,reactjs,immutability,flux,immutable.js
I am learning React.js and Flux, and I understand that is better to keep the object immutable because comparing them is O(1). My situation is this: I have a store, which has a _state object, that is a map (I'm using Immutable-js). That _state has some booleans, some strings and...

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