FAQ Database Discussion Community


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

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

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

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

ReactJS passing a prop that the element owns to a function

javascript,reactjs
I am trying to return a <li> element with an eventListener. But I want the <li> to pass a property it owns to a function onClick. This is specifically what I am talking about: return (<li onClick={this.changeTab(tab_id)} tab_id={index + 1} <a href="#">{obj.display_name}</a></li>); But if you do something like this, you...

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

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

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

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

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

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

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

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

Cart not adding correct item in React.js

javascript,reactjs
I'm learning React.js (and I'm a beginner at JavaScript) and having some difficulty getting my addToCart function working properly. I've managed to get all my products to display but adding to cart on any of them only adds the first item, and once that item is out of stock then...

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

Do I have to call super.componentDidUpdate in React?

reactjs,ecmascript-6
In a subclass of React.Component, do I have to call super.componentDidUpdate from my componentDidUpdate method? Or is it done automatically? (I am trying to call it but there is an error message Cannot read property call of undefined)...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adding resolver to React-router

reactjs,react-router,refluxjs
In react-router, is there any way to pass a property from the Route-definition that can be picked up within the Router.run function? I want specific actions to fire for specific routes. Something like this perhaps: <Route handler={someComponent} resolve={someAction} /> In Router.Run i want to execute that given action defined in...

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

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

Display a div at the position of mouse click

javascript,reactjs
I have a table of cells, and I want to be able to create a menu on the point of right click. I have an example of my fiddle here: jsFiddle Now the ContextMenu class is just a div that I created for this example. As you can see there...

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

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

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

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

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

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

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

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

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

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

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

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

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

react-router go back a page how do you configure history?

javascript,reactjs,react-router
Can anyone please tell me how I can go back to previous page rather than a specific route? When using this code: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); Get this error, goBack()...

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

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

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

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

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

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

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

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