FAQ Database Discussion Community


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

Why is not this onClick work?

javascript,reactjs,react-jsx
I have the following reactJS/JSX code : var LikeCon = React.createClass({ handleClick: function(like) { return; }, render(){ return this.renderLikeButton(this.props.like, this.props.likeCount) }, renderLikeButton(like, likeCount){ return ( content = <div className={like==true ? "likeButConAct" : "likeButCon"}> <div className="likeB" onClick={this.handleClick(!like)} >&nbsp;</div> { likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null} </div> ); } }); The...

Refs in dynamic components with ReactJS

reactjs,react-jsx
I'm facing a issue and I haven't found any documentantion related. This is my component's render method: render() { return ( <div refs="myContainer"> </div> ); } Additionally I have a method to get data from my Java server: getAsyncData() { $.get('...URL...') .done(function(response) { var list = JSON.parse(response); // This is...

Use react-autolink+react-emoji together (give me error r.split)

javascript,reactjs,react-jsx
I'm new to react...I'm trying to use react-autolink component together with react-emoji component. The problem is that when I do: {@autolink(@emojify(@props.message.body))} It give me this error: Uncaught TypeError: r.split is not a function Why ? instead if I use only: @emojify(@props.message.body) Or @autolink(@props.message.body) It works... Any suggestion ?...

How to pass hml with event bindings as a string into the render() method?

javascript,reactjs,react-jsx
I would like to take an HTML string that has a tags within it, assign event handlers to them, and render them. Example html: This is a sample blog post with HTML. <a data-id="1">Click here.</a> I can use jQuery to parse this HTML string and insert events (or props, or...

Cannot render: React.renderComponent in my meteor app

meteor,reactjs,react-jsx
Hi there I just started making my meteor app with react(jsx) in webstorm and I can't seem to find out why my React component won't render no matter how much i search around. I was following this tutorial and this is the script in my html <script type="text/jsx"> /*** @jsx...

React keeps escaping the amp character (&) in attributes

javascript,css,escaping,reactjs,react-jsx
I have a component with a data-icon attribute. The value of this attribute should be, for instance, &#xf00f so that css can render it via content: attr( data-icon );. However, whatever I try: React keeps escaping to &amp;. Even when I provide the proper unicode character \u0026#xf00f. Is there some...

React CSSTransitionGroup list animation weird behaviour

css3,reactjs,css-animations,react-jsx
I was trying to animate list insertion and removal with ReactCSSTransitionGroup, but the removal animation always animates only the last item of the list instead of the one that's being removed. Here's a jsbin to illustrate this problem. Try pressing the "Add" button to verify that the insertion animation indeed...

How to use if within a map return?

javascript,reactjs,react-jsx
I need to generate diffrent reactJS code based on datamodel but I get In file "~/Scripts/Grid.jsx": Parse Error: Line 13: Unexpected token if (at line 13 column 15) Line: 52 Column:3 With this code var GridRow = React.createClass({ render: function() { var row; row = this.props.cells.map(function(cell, i) { return (...

Replace part of string with tag in JSX

reactjs,jsx,react-jsx
I'm trying to replace parts of a string with JSX tags, like so: render: function() { result = this.props.text.replace(":",<div className="spacer"></div>); return ( <div> {result} <div> ); } But given that this.props.text is Lorem : ipsum, it results in <div> Lorem [object Object] ipsum. </div> Is there a way to solve...

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

Conditionally rendering component sections in React JSX

javascript,reactjs,conditional-statements,conditional-operator,react-jsx
According to MDN "You can also do more than one single operation per case, separating them with a comma." The example below works: var stop = false, age = 23; age > 18 ? ( alert("1"), alert("2") ) : ( stop = true, alert("Sorry, you are much too young!") );...

React Native (IOS), how to create a view that scrolls?

ios,reactjs,react-native,react-jsx
I'm trying to make a simple app that simply lists a bunch of information on the screen. Right now the app is just made up of a container View and then Views and Texts inside of it. Once there is enough info on the screen that it fills up the...

React.js how to pass callbacks to child components?

javascript,callback,reactjs,react-jsx
I would like to pass a callback to a doubly nested component, and while I am able to pass the properties effectively, I can't figure out how to bind the callback to the correct component so that it's triggered. My structure looks like this: -OutermostComponent -FirstNestedComponent -SecondNestedComponent -DynamicallyGeneratedListItems The List...

Iterating through a JSON response in JSX Render for React.js

javascript,json,reactjs,jsx,react-jsx
I'm trying to create a table from a JSON response formulated from a submitted form, therefore the initial render needs to be blank, but this blank state is proving to be an issue. The issue is complicated further by the fact that the response could have different headers, number of...

How to run SystemJS/React demo locally with JSX?

javascript,reactjs,react-jsx,systemjs
I'm following this video tutorial at the moment and I'm stuck with the simple HelloWorld App. At the time position 12m:31s is where I'm stuck it should show HelloWorld but it doesn't. The App is using SystemJs, React and JSX. To create the app do these steps in your terminal...

`Invalid mapping` error trying to use babel require hook and polyfill with react jsx transpile

source-maps,react-jsx,babeljs
I'm trying to use babel for both ES6 and JSX transpilation for mocha tests. Suppose we have test.jsx like this: var React = require("react"); React.createClass({ render: function(){ return (<div>Hello World</div>); } }); Running babel test.jsx gives us valid transformed code. No problem. I would expect that if I create a...

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 decrease render calls in controller view with flux/reactjs

javascript,reactjs,reactjs-flux,react-jsx
I am working on project with react Flux architecture. my controller view look like var MyComponent = React.createClass({ getInitialState: function() { return MyStore.getData(); }, render: function() { return <ul className="navigation"> <UserControl/> <NavigationBar change={this._onChange} messageCounter={this.state.data.score}/> </ul> }, _onChange: function() { this.setState(Store.getData()); } }); I have some nested views in the render...

How to force reactJS to redraw?

javascript,ajax,reactjs,react-jsx
I am trying to update my table with a ajax call by using this.setState({ data: data }); but the datatable is not redrawn with the new data? (I can see that new data is received) var GridRow = React.createClass({ render: function() { var data = [], columns; if(this.props.columns){ for(var i...

ReactJS - Uncaught Error: Parse Error: Line 27: Unexpected token

javascript,reactjs,react-jsx
I'm getting this error Uncaught Error: Parse Error: Line 27: Unexpected token . Seems like there shouldn't be a "." after this How can I fix it ? Here is my whole code var PageHandler = React.createClass({ getInitialState: function() { return { page: '' }; }, render: function(){ return( {this.state.page...

React: How to navigate via clickHandlers?

javascript,reactjs,jsx,react-jsx
I just started learning React and I'm stuck in the following scenario. There is an input field and on clicking the search button it takes the input value and redirect to /search/search-query/some-action I have setup the path, defined the route to the correct view. And, I was able to do...

React.js table: remove row button visually removes incorrect row

reactjs,jsx,react-jsx
I am using React.js to dynamically create a html table containing text boxes. I have rows that can be removed by a button click. I expect, when I click "remove" on the first row that the table re-renders with row 1 removed. However, when react re-draws the table, it looks...

How to use If-Else in JSX

javascript,reactjs,jsx,react-jsx
I understand how to use it in simple situations: {(this.state.show) ? <span>Show</span> : null} But how to use it for big DOM? { if (this.state.show) { <span className={this.state.className}>Hi</span> {this.state.text} } else { {this.state.text} } } Of course, it doesn't work. How to do it correctly? ...

Iterate over all refs values in component

javascript,reactjs,jsx,react-jsx
I am trying to access all ref values in my component and do something with them (for example, create payload to send to a server) I was trying to do a simple for..in loop and than use getDOMNode().value on every ref but it doesn`t work. var Hello = React.createClass({ getAllRefsValues:...

React: jsx compiler ignore files and folders list

compilation,reactjs,react-jsx
Is there a way to provide ignore files or folders list while compiling js files using jsx. I'm aware that it takes config as an option, but I'm not sure how to use it. Help appreciated....

How to build a table dynamically

javascript,reactjs,react-jsx
I try to build a table dynamicly with reactJS but have two questions that I can´t solve : In the GridList component I got this row <GridRow data={data1} key={i} /> I dont really want to fetch the "global" var but instead use the data that are sent in to the...

how to remove / unmount nested react components

reactjs,reactjs-flux,react-jsx
I'd like to unmount a single react component, which belongs to a parent component containing three components total. The parent component has this render function: render: function () { return ( <div className={classes}> <Navbar ref="navbar"/> <Home ref="home"/> <Footer ref="footer"/> </div> ), handleNavbarClick: function () { // remove Home } if...

React-Flux: Error with AppDispatcher.register

javascript,jsx,reactjs-flux,react-jsx,flux
I am trying to set up the most basic app in Flux-React. Its sole goal to is fire an Action, which gets sent through the Dispatcher to a Store that has registered with the Dispatcher. The store the logs the payload to Console. Everything besides the Store is working well,...

React.js implement UI effects after mounting

javascript,dom,coffeescript,reactjs,react-jsx
Let's suppose I have a React class, which has a components - fields with autosize.js and bootstrap form helpers phone libraries. There is a trouble. Because of these few (and a lot of another) libs rendered exactly after DOM is loaded, I need to manually implement these libraries to components...

Using Browserify with a revision manifest in Gulp, getting “Error: write after end”

gulp,browser-cache,browserify,react-jsx
I'm trying to compile a React app, append a hash to the output filename and produce a revision manifest, so that I can tell the browser to cache it forever. The problem is that the dozen or so tools involved don't all work together perfectly, at least as far as...

Render react component multiple times

reactjs,react-jsx
I have some posts on page, [ imagine this ] and i need my to be added at the bottom of each of those posts, Just like Facebook, But how can I do this ? React.renderComponent(<CommentForm />,document.getElementById('someId')); is what react tutorial says.. Do I have to iterate through all the...

How to add keys the proper way to this react code

javascript,reactjs,jsx,react-jsx
I get warnings about missing keys on GridRow in the following code. I have read about it but I do not find a way to apply it to the react component? It seems like I have to do it in the final render method but I dont have any data...

How to trigger submit on form the right way?

javascript,jquery,reactjs,react-jsx
I need to trigger a submit on a form but then handle it with javascript. This is how the component looks like var CommentForm = React.createClass({ handleSubmit: function(e) { alert("YES again"); return; }, render: function() { return ( <div className="postCon"> <form className="commentForm" onSubmit={this.handleSubmit}> <textarea className="textA input" placeholder="Your comment" ref="author" />...

Is there a way to unleash the full might of ES6 with React JSX?

javascript,reactjs,ecmascript-6,ecmascript-harmony,react-jsx
I'm currently using browserify with reactify plugin to compile jsx code for ReactJS components. This allows me to use certain subset of ES6 in the code (arrow functions, string interpolation etc). Is there a possibility to use full ES6 (having it compiled down to ES5) with JSX? I think I...

How to avoid rendering element as simple as possible

javascript,reactjs,react-jsx
I have a reactJS component that looks like this : var LikeCon = React.createClass({ render(){ return this.renderLikeButton(this.props.like, this.props.likeCount) }, renderLikeButton(like, likeCount){ var content; var tmpLikeCount; if(likeCount < 1){ tmpLikeCount = ""; } else{ tmpLikeCount = likeCount; } if(like == 1){ content = <div className="likeButConAct"><div className="likeB">&nbsp;</div><div className="likeCount">{tmpLikeCount}</div></div> } else{ content =...

Tool for checking codestyle in JSX files [closed]

javascript,reactjs,react-jsx,jscs
There are exists many beautiful code formatting tools for vanilla Javascript. For example, JSCS. Is there any tool that can validate and format reactjs templates? I have got error like that one at this moment Unexpected token < at static/view/Auth.jsx : 34 | 35 | return ( 36 | <div...

setState() not updating the View - reactjs

reactjs,react-jsx
Good day Guys, I have just started using Reactjs for a project but am stuck in this issue and can do with some help. I am trying to implement an Order management system where orders are pushed to the browser using websockets and then a reactjs view is updated as...

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: Child component updates before parent state is set

reactjs,reactjs-flux,react-jsx
I have parent and child components where the state of the child (openWhen is essentially a shouldChildRender) is controlled by the parent. I'm running into an issue where the child is updated (receives props) before the parent state is updated after calling the parent's setState() so the child receives stale...

How to write proper react code for usercontrol?

javascript,reactjs,react-jsx
I am building "usercontrols" with reactJS and a method that renders a part might look something like this : var FeedTopic = React.createClass({ render: function() { return ( <div className="topic"> <div className="tUImgLnk"> <a title={this.props.data.UserName} target="_blank" href={this.props.data.UserInfoUrl}> <img className="tUImg" src={this.props.data.UserPicSrc} /> </a> </div> <div className="tInfo"> <div className="tName"> <a title={this.props.data.UserName} target="_blank"...

How to use Variables in setState in JSX

javascript,reactjs,jsx,react-jsx
I would like to use a variable in the setState function in a JSX file for React. How would I restructure this code: var name = e.target.name; if(name == "title"){ this.setState({ title: e.target.value}); } else if(name == "date"){ this.setState({ date: e.target.value}); } else if(name == "amount"){ this.setState({ amount: e.target.value}); }...

Returns [Object object] instead Dom string in Reactjs

javascript,reactjs,react-jsx
var content = ""; for(var i=0;i<menuData.length;i++){ content += <li className={"accordion-menu-item "+showComponent} onClick={this.handleClick} id={menuTag}> <div className={"menuLabel "+labelClassName}>{componentLabel}{manageActionLabel}</div> {allowDropDownElement} {this.createInnerComponent(allowDropDownFlag,innerComponents,showComponent)} </li> } return <ul className="accordion-menu-wrapper">{content}</ul> Above code is all put up in Reactjs. The above code is a code inside a function which...

React js map() undefined is not a function

javascript,ajax,reactjs,react-jsx
I am new to React and I am going a little crazy trying to figure out what I am doing wrong. I am trying to iterate through a json array that I get from an ajax call. When I mock the data it works perfectly, but when I make an...

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

How to turn objects in to HTML

javascript,reactjs,react-jsx
How do i get this : <li> <div class='myClass1'>myData1</div> <div class='myClass2'>myData2</div> <div class='myClass3'>myData3</div> <div class='myClass4'>myData4</div> </li> from this code var data1 =...

React not passing along properties when rendering in variable

reactjs,react-jsx
I'm writing a reusable component for menu itens, but React is not passing along the properties to the HTML when I render it in a variable. I'm using Browserify with the reactify tranform. Here is the component code: var React = require('react'); var ReactPropTypes = React.PropTypes; var Menu = React.createClass({...

React/JSX dynamic component names

javascript,reactjs,jsx,react-jsx
I am looking to render a component based upon a string. Essentially, I am hoping to find the JSX equivalent to JavaScript's dynamic function name ability (parent["childMethod"]). So, if I have a string, such as "<MyComponent />", how can I turn into JSX and render?...

React child component receiving props as undefined

reactjs,lodash,react-jsx
I have component Comp1 and it's child Comp2. The state of markers is set in the parent component to this object: var MARKER_ITEMS = { "item1" : { "cat" : "wow", "img" : "slide", "info" : "bike", "key" : "1" }, "item2" : { "cat" : "omg", "img" : "slide",...

How to transfer props in react v0.13?

javascript,reactjs,react-jsx
I'm trying to learn react for my first javascript project and as a start creating a very simple code that adds two numbers entered in a text box. The result is re-rendered as a number is typed. This worked for me on react v0.11. var App = React.createClass({ mixins: [React.addons.LinkedStateMixin],...

Listen to keypress for document in reactjs

reactjs,react-jsx,react-bootstrap
I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange);...

How can I pass props/context to dynamic childrens in react?

javascript,reactjs,react-jsx
I am using react, and I am trying to pass props/context to my dynamic childrens, by dymamic childrens I mean childrens are render using {this.props.children} How can I pass to this children (In my code I know it's type) context/props? In this jsbin there is an example that it dosen't...