FAQ Database Discussion Community


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jest - How to find rendered DOM component with id?

reactjs,jestjs
I am writing a simple Jest test that verifies that my component rendered. I see that React's TestUtils has functions for finding rendered components by class or by tag, but not by their ID attribute. There is a findAllInRenderedTree function, but the documentation does not explain what the callback should...

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

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

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

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

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

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