FAQ Database Discussion Community


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

defaultValue change does not re-render input

reactjs
I have no idea why this is not working Demo I have the following es6 code const {createFactory, createClass, DOM: { label, input, button }} = React; const tester = createFactory(createClass({ render() { return label({} ,`Name: ${this.props.name}` ,input({defaultValue: this.props.name}) ,button({onClick: this.changeName}, "Change") ) }, changeName() { this.setProps({name: "Wilma"}) } })...

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

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

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

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

Unable to render second react component

reactjs
I am just fiddling with react to make a simple website. So here's the code <html> <head> <script src="https://fb.me/react-0.13.3.js"></script> <!-- In-browser JSX transformer, remove when pre-compiling JSX. --> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"></div> </body> <script type="text/jsx"> var...

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

list not ordering well dynamic children

reactjs
My problem is that react is not respecting the order I am giving by the backend. It gives me a warning. Child objects should have non-numeric keys so ordering is preserved I checked the documentation and I don't know where the error is. dynamic children I'm passing the key to...

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

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

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

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

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

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

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() {...

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

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

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

Events not propagating across react components

javascript,reactjs
I have the following react components: class Button extends React.Component { constructor(props){ super(props); this.state = { disabled: false }; } render() { return <button disabled={this.state.disabled} onClick={this.clicked.bind(this)}>Save</button>; } clicked(event) { this.setState({disabled: true}); } } class Form extends React.Component { contructor(props) { super(props); this.state = { foo: "bar" }; } render() {...

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

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

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

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

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

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

Dynamic key in immutability update helper for array

javascript,reactjs,ecmascript-6
https://facebook.github.io/react/docs/update.html I have an update function that receives an index along with the event so as to alter the value for that specific item in the array. How do I get index to be evaluated instead of treated as a set key in this scenario? Is it even possible? updateValue:...

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

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

React components as plain JS objects?

javascript,class,reactjs,javascript-objects,ecmascript-6
Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method. Maybe you have some examples of factory functions or similar to share? Thanks!...

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

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

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

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

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

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

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() {...

No call function of parent in Reactjs

javascript,jquery,ruby-on-rails,reactjs
I have two function in Reactjs. When function one call a function of function two. There have error same as "Uncaught TypeError: this.props.onButonShowClick is not a function" This is function one : var HiddenEdit = React.createClass({ _handleOnClick: function(e) { e.preventDefault(), this.props.onButonShowClick(true); }, render: function() { return (<span className="col-lg-2 btn-action-group"> <a...

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

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

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

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

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