I&#39;m trying to find the proper way to define some components which could be used in a generic way:

    &lt;Parent&gt;
      &lt;Child value=&quot;1&quot;&gt;
      &lt;Child value=&quot;2&quot;&gt;
    &lt;/Parent&gt;

There is a logic going on for rendering between parent and children components of course, you can imagine `&lt;select&gt;` and `&lt;option&gt;` as an example of this logic.

This is a dummy implementation for the purpose of the question:

    var Parent = React.createClass({
      doSomething: function(value) {
      },
      render: function() {
        return (&lt;div&gt;{this.props.children}&lt;/div&gt;);
      }
    });

    var Child = React.createClass({
      onClick: function() {
        this.props.doSomething(this.props.value); // doSomething is undefined
      },
      render: function() {
        return (&lt;div onClick={this.onClick}&gt;&lt;/div&gt;);
      }
    });

The question is whenever you use `{this.props.children}` to define a wrapper component, how do you pass down some property to all its children?


How to pass props to {this.props.children}

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected.

With a top-level `React.render` this has been possible, but within a component it doesn&#39;t work (which makes some sense since the `render` method just returns an object).

Here&#39;s a code example:

&lt;!-- language: lang-js --&gt;

    export default class MyComponent extends React.Component {
      
      handleButtonClick() {
        this.render();
      }

      render() {
        return (
          &lt;div&gt;
            {Math.random()}
            &lt;button onClick={this.handleButtonClick.bind(this)}&gt;
              Click me
            &lt;/button&gt;
          &lt;/div&gt;
        )
      }
    }

Clicking the button internally calls `this.render()`, but that&#39;s not what actually causes the rendering to happen (you can see this in action because the text created by `{Math.random()}` doesn&#39;t change). However, if I simply call `this.setState()` instead of `this.render()`, it works fine.

**So I guess my question is:** do React components *need* to have state in order to rerender? Is there a way to force the component to update on demand without changing the state?

Can you force a React component to rerender without calling setState?

I&#39;m reading [Forms][1] section of [tag:reactjs] documentation and just tried this code to demonstrate `onChange` usage ([JSBIN][2]).

    var React= require(&#39;react&#39;);
    
    var ControlledForm= React.createClass({
    	getInitialState: function() {
    		return {
    			value: &quot;initial value&quot;
    		};
    	},
    
    	handleChange: function(event) {
    		console.log(this.state.value);
    		this.setState({value: event.target.value});
    		console.log(this.state.value);
    
    	},
    
    	render: function() {
    		return (
    			&lt;input type=&quot;text&quot; value={this.state.value} onChange={this.handleChange}/&gt;
    		);
    	}
    });
    
    React.render(
    	&lt;ControlledForm/&gt;,
      document.getElementById(&#39;mount&#39;)
    );

When I update the `&lt;input/&gt;` value in the browser, the second `console.log` inside the `handleChange` callback prints the same `value` as the first `console.log`, Why I can&#39;t see the result of `this.setState({value: event.target.value})` in the scope of `handleChange` callback?

  [1]: https://facebook.github.io/react/docs/forms.html
  [2]: http://jsbin.com/zilofo/edit?html,js,console,output

Why calling react setState method doesn&#39;t mutate the state immediately?

I am trying to dynamically render components based on their type.

For example:

    var type = &quot;Example&quot;;
    var ComponentName = type + &quot;Component&quot;;
    return &lt;ComponentName /&gt;; 
    // Returns &lt;examplecomponent /&gt;  instead of &lt;ExampleComponent /&gt;

I tried the solution proposed here https://stackoverflow.com/questions/28842459/react-jsx-dynamic-component-names

That gave me an error when compiling (using browserify for gulp). It expected XML where I was using an array syntax.

I could solve this by creating a method for every component:

    newExampleComponent() {
        return &lt;ExampleComponent /&gt;;
    }

    newComponent(type) {
        return this[&quot;new&quot; + type + &quot;Component&quot;]();
    }

But that would mean a new method for every component I create. There must be a more elegant solution to this problem.

I am very open to suggestions.

React / JSX Dynamic Component Name

How do I optionally include an element in JSX?  Here is an example using a banner that should be in the component if it has been passed in.  What I want to avoid is having to duplicate HTML tags in the if statement.

    render: function () {
        var banner;
        if (this.state.banner) {
            banner = &lt;div id=&quot;banner&quot;&gt;{this.state.banner}&lt;/div&gt;;
        } else {
            banner = ?????
        }
        return (
            &lt;div id=&quot;page&quot;&gt;
                {banner}
                &lt;div id=&quot;other-content&quot;&gt;
                    blah blah blah...
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }



How to have conditional elements and keep DRY with Facebook React&#39;s JSX?

I&#39;m trying to convert a jQuery component to React.js and one of the things I&#39;m having difficulty with is rendering n number of elements based on a for loop.  

I understand this is not possible, or recommended and that where an array exists in the model it makes complete sense to use `map`.  That&#39;s fine, but what about when you do not have an array?  Instead you have numeric value which equates to a given number of elements to render, then what should you do?

Here&#39;s my example, I want to prefix a element with an arbitrary number of span tags based on it&#39;s hierarchical level.  So at level 3, I want 3 span tags before the text element.  

In javascript:

    for (var i = 0; i &lt; level; i++) {
	    $el.append(&#39;&lt;span class=&quot;indent&quot;&gt;&lt;/span&gt;&#39;);
	}
    $el.append(&#39;Some text value&#39;);

I can&#39;t seem to get this, or anything similar to work in a JSX React.js component.  Instead I had to do the following, first building a temp array to the correct length and then looping the array.

React.js

    render: function() {
      var tmp = [];
      for (var i = 0; i &lt; this.props.level; i++) {
        tmp.push(i);
      }
      var indents = tmp.map(function (i) {
        return (
          &lt;span className=&#39;indent&#39;&gt;&lt;/span&gt;
        );
      });

      return (
        ...
        {indents}
        &quot;Some text value&quot;
        ...
      );
    }

Surely this can&#39;t be the best, or only way to achieve this?   What am I missing?

How to loop and render elements in React.js without an array of objects to map?

I&#39;ve just started exploring React, by adding a component with a simple render function:

    render() {
      return &lt;div class=&quot;myApp&quot;&gt;&lt;/div&gt;
    }

When I run the app, I get the following error:

    Warning: Unknown DOM property class. Did you mean className?

I can solve this by changing `class` to `className`.

The question is; does React enforce this convention? Also why do I need to use `className` instead of the conventional `class`? If this is a restriction then is it due to JSX syntax or somewhere else?

  [1]: http://fluxible.io/quick-start.html

Warning: Unknown DOM property class. Did you mean className?

I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: &quot;Uncaught SyntaxError: Unexpected token &lt;&quot;.

I tried adding `/** @jsx React.DOM */` to the top of the JS file, but it didn&#39;t fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong?

**HTML**

    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Page&lt;/title&gt;
        &lt;script src=&quot;http://fb.me/react-0.12.2.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://fb.me/JSXTransformer-0.12.2.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://code.jquery.com/jquery-1.10.0.min.js&quot;&gt; &lt;/script&gt;
        &lt;script src=&quot;./lander.js&quot;&gt; &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
        &lt;script type=&quot;text/jsx&quot;&gt;
      	    React.render(
      		    &lt;Lander /&gt;,
  			    document.getElementById(&#39;content&#39;)
		    );
        &lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;


**JS**

    /**
     * @jsx React.DOM
     */
    var Lander = React.createClass({
        render: function () {
            var info = &quot;Lorem ipsum dolor sit amet... &quot;;
            return(
                &lt;div&gt;
                    &lt;div className=&quot;info&quot;&gt;{info}&lt;/div&gt;
                &lt;/div&gt;
            );
        }
    });

EDIT: I realized that I need to add `type=&quot;text/jsx&quot;` to the script tag which includes my lander code. However, after adding this and reloading I get this warning 

&quot;You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx&quot; 

followed by this error:

&quot;XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.&quot;

it seems like there is something else that I need to do in order to get in browser jsx transform working, but I&#39;m not sure what it is.

EDIT: OOOOH do I need to host it using MAMP or something?

ReactJS: &quot;Uncaught SyntaxError: Unexpected token &lt;&quot;

I understand how (and [why][1]) to add a whitespace in JSX, but I am wondering what&#39;s best practice or if any makes any real difference?

**Wrap both elements in a span**
    
    &lt;div className=&quot;top-element-formatting&quot;&gt;
      &lt;span&gt;Hello &lt;/span&gt;
      &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
    &lt;/div&gt;

**Add them on one line**

      &lt;div className=&quot;top-element-formatting&quot;&gt;
        Hello &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
      &lt;/div&gt;

**Add space with JS**

    &lt;div className=&quot;top-element-formatting&quot;&gt;
        Hello {&quot; &quot;}
        &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
    &lt;/div&gt;

  [1]: https://stackoverflow.com/questions/32686728/how-to-avoid-jsx-component-from-condensing-when-react-js-rendering-it

Best practice when adding whitespace in JSX

I have a file test_stuff.js that I am running with `npm test`

It pretty much looks like this:


    import { assert } from &#39;assert&#39;;
    import { MyProvider } from &#39;../src/index&#39;;
    import { React } from &#39;react&#39;;

    const myProvider = (
      &lt;MyProvider&gt;
      &lt;/MyProvider&gt;
    );

    describe(&#39;Array&#39;, function() {
      describe(&#39;#indexOf()&#39;, function() {
        it(&#39;should return -1 when the value is not present&#39;, function() {
          assert.equal(-1, [1,2,3].indexOf(4));
        });
      });
    });


Unfortunately, I get the error

    /Users/me/projects/myproj/test/test_stuff.js:11
    var myProvider = _react.React.createElement(_index.MyProvider, null);
                                 ^

    TypeError: Cannot read property &#39;createElement&#39; of undefined
        at Object.&lt;anonymous&gt; (/Users/me/projects/myproj/test/test_stuff.js:7:7)

What does that mean? I am importing React from &#39;react&#39; successfully, so why would React be undefined? It is _react.React, whatever that means...

React JSX file giving error &quot;Cannot read property &#39;createElement&#39; of undefined&quot;

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(&quot;click&quot;, this._handleDocumentClick, false);
         document.addEventListener(&quot;keyPress&quot;, this._handleEscKey, false);
       },
    
      
       componentWillUnmount: function() {
         BannerDataStore.removeChangeListener(this._onchange);
          document.removeEventListener(&quot;click&quot;, this._handleDocumentClick, false);
          document.removeEventListener(&quot;keyPress&quot;, this._handleEscKey, false);
       },

But nothing is getting logged in the console when I press any key. I have tried to listen that on window also and with different cases .&#39;keypress&#39;,&#39;keyup&#39; etc but it seem I am doing something wrong .



Listen to keypress for document in reactjs

I am trying to render boolean value inside JSX, however React is evaluating it as expression and isn&#39;t returning anything after the component is returned.

Any workaround for this?

Here is an example 


    var ipsumText = true;

    ReactDOM.render(
      &lt;div&gt;
         Boolean Value:    {ipsumText}
      &lt;/div&gt;,
      document.getElementById(&#39;impl&#39;)
    );

Just shows compiled HTML as 

    &lt;div data-reactid=&quot;.0&quot;&gt;&lt;span data-reactid=&quot;.0.0&quot;&gt;Boolean Value:    &lt;/span&gt;&lt;/div&gt;


**EDIT:** Here is the JSBin link for the example http://jsbin.com/nibihodoce/1/edit?html,js,output

**EDIT 2:** I have already explored the .toString() alternative, however since I am iterating over an array of objects and a particular field of that object can have string/integer/boolean kind of value. Applying .toString() to all of &#39;em doesn&#39;t seem optimal.

Cannot render boolean value in JSX?

I&#39;m using Sublime Text as a text editor.

There&#39;s a jsFormat for formatting javascript files but I can&#39;t find one for JSX.

How you guys deal with formatting JSX?

Is there a JSX formatter for sublime text?

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 &lt;/div&gt;`

    var Main = React.createClass({
        render: function() {
            return (
    	        &lt;div className=&quot;card-action&quot;&gt;
		            &lt;i class=&quot;mdi-action-account-circle prefix&quot;&gt;&lt;/i&gt;
                    &lt;input id=&quot;icon_prefix&quot; type=&quot;text&quot; class=&quot;validate&quot;&gt;
		        &lt;/div&gt;
		    );
        }
    });

Expected corresponding JSX closing tag for input Reactjs

How can I use React.DOM to change styles on HTML `body`?

I tried this code and it&#39;s not working:

    var MyView = React.createClass({
      render: function() {
        return (
          &lt;div&gt;
            React.DOM.body.style.backgroundColor = &quot;green&quot;;
            Stuff goes here.
          &lt;/div&gt;
        );
      }
    });

If you execute this from the browsers console it works (but I need it working in ReactJS code):
`document.body.style.backgroundColor = &quot;green&quot;;`

Also see this question for similar but different solution:
https://stackoverflow.com/questions/25473414/change-page-background-color-with-each-route-using-reactjs-and-react-router

Trying to use React.DOM to set body styles

Is there any way to move the jsx from a component&#39;s render function to a separate file? If so, how do I reference the jsx in the render function?

React.js: how to decouple jsx out of JavaScript

I&#39;m trying new react-router 1.0.0 and I&#39;m getting strange warnings I can&#39;t explain:

&gt; Warning: Failed propType: Invalid prop \`component\` supplied to
&gt; \`Route\`.
&gt;
&gt; Warning: Invalid undefined \`component\` supplied to \`Route\`.

**The app is simple:**
    &lt;!-- language: jsx --&gt;

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import { Router, Route } from &#39;react-router&#39;;

    import App from &#39;./components/app&#39;;

    var Speaker = require(&#39;./components/speaker&#39;);

    ReactDOM.render((
        &lt;Router&gt;
          &lt;Route path=&quot;/&quot; component={App}&gt;
            // This is the source of the warning:
            &lt;Route path=&quot;speaker&quot; component={ Speaker }/&gt;
          &lt;/Route&gt;
        &lt;/Router&gt;
    ), document.getElementById(&#39;react-container&#39;));

**speaker.jsx:**

    import React from &#39;react&#39;;

    var Speaker = React.createClass({
      render() {
        return (
            &lt;h1&gt;Speaker&lt;/h1&gt;
        )
      }
    });

    module.exoprts = Speaker;

**app.jsx only has the following render() function:**

    render() {
        return (
            &lt;div&gt;
                &lt;Header title={this.state.title} status={this.state.status} /&gt;

                {this.props.children}
            &lt;/div&gt;);
    }

When I type in the route to #/speaker or #speaker - nothing is displayed except for title. Please help.

Warning: Failed propType: Invalid prop `component` supplied to `Route`

In ReactJS, is there a way to determine if the website is being viewed on mobile or desktop? Because, depending on which device I would like to render different things.

Thank you

ReactJS: How to determine if the application is being viewed on mobile or desktop browser

This is my code:

    const func = () =&gt; {
      return (
        &lt;div &gt;
           you&#39;re free
          &lt;/div&gt;
      )}

Somehow eslint flags the line &quot;you&#39;re free&quot; with error `error  HTML entities must be escaped  react/no-unescaped-entities`

However from what I can see jsx has escaped the apostrophes already. I can see the words `you&#39;re free` is rendered without issue. If I escape it as `&amp;#39;`, then it will be very hard for me to search for the string (I would expect a search of `you&#39;re free` in an editor to return a hit. But obviously the editor will miss because the text is actually `you&amp;#39;re free`)

So what is the best way to address this eslint exception?

How to fix this violation of this &#39;react/no-unescaped-entitie&#39; of eslint rule?

How can I get a proper syntax highlighting in Visual Studio 2015 for JSX with ES2015 code?

[![ES2015 code][1]][1]

It works fine if I remove the `import` and `export` keywords:
[![Without import/export][2]][2]

I just updated to Visual Studio 2015 Enterprise Update 1 but it still remains the same.

  [1]: http://i.stack.imgur.com/Al2XM.png
  [2]: http://i.stack.imgur.com/t5LwV.png


Visual Studio 2015 JSX/ES2015 syntax highlighting

I had been previously using [Allan Hortle&#39;s JSX package](https://github.com/allanhortle/JSX) until I ran into an issue with how it handled syntax highlighting. I then noticed that there is an official package, [sublime-react](https://github.com/reactjs/sublime-react).

With Allan Hortle&#39;s package, he included a snippet in the `Preferences &gt; Key Bindings – User` for enabling Emmet functionality that looks like this:

    {
        &quot;keys&quot;: [&quot;tab&quot;],
        &quot;command&quot;: &quot;expand_abbreviation_by_tab&quot;, 
        &quot;context&quot;: [
            {
                &quot;operand&quot;: &quot;source.js.jsx&quot;, 
                &quot;operator&quot;: &quot;equal&quot;, 
                &quot;match_all&quot;: true, 
                &quot;key&quot;: &quot;selector&quot;
            }
        ]
    }

This snippet doesn&#39;t appear to work with the official sublime-react package. It seems to be something to modify with the key bindings but an initial perusal of the Sublime documentation yielded no light on the subject. Help?

In Sublime Text 3, how do you enable Emmet for JSX files?

How would I take a string, and convert it to `jsx`?  For example, if I bring in a string from a `textarea`, how could I convert it to a `React` element;

    var jsxString = document.getElementById(&#39;textarea&#39;).value;

What is the process I would use to convert this on the client?  Is it possible?

How do I convert a string to jsx?

Visual Studio Code now [supports JSX on 0.8 version][1], but looks like the only way to activate it is with a `.jsx` file extension. It is not on the list to change the language mode manually, the nearest option is `JavaScriptReact`, but it doesn&#39;t parse the JSX tags.

I&#39;m in a project with a lot of `.js` files with JSX and I can&#39;t change it.

Is there any other way to use JSX syntax without the `.jsx` extension?

  [1]: https://code.visualstudio.com/Updates#_languages-jsx-colorization

Change language to JSX in Visual Studio Code

I recently started working with `ReactJS`. Specifically, I am utilizing the `react-rails` ruby gem and `react-bootstrap` components.

I have a question regarding placing `onClick` event listeners in child components. 

As you can see from the code sample below, I have a parent component that &#39;calls&#39; a child component in its `render` function. Within that `render` function, I have React `onClick` listener that calls `handleToggle` when it is clicked.
 

&lt;!-- language: lang-coffee --&gt;

    ###* @jsx React.DOM ###

    ToggleIconButton = React.createClass
      getInitialState: -&gt;
        toggleOn: false
      handleToggle: (evt) -&gt;
        this.setState(toggleOn: !this.state.toggleOn)
      render: -&gt;
        `&lt;IconButton onClick={this.handleToggle}&gt;Toggle Button&lt;/IconButton&gt;`

    IconButton = React.createClass
      render: -&gt;
        # BsButton and BsGlyphicon are React-Bootstrap components
        `&lt;BsButton&gt;
          &lt;BsGlyphicon glyph={this.props.glyph} /&gt;
          {&quot; &quot; + this.props.text}
         &lt;/BsButton&gt;`

---
Unfortunately, this doesn&#39;t work the way I thought it would. `ToggleIconButton::handleToggle` never gets called. Instead, the `onClick` listener is placed on `IconButton` and references `ToggleIconButton::handleToggle`. 


![React Dev Tool Screen][1]

----
I don&#39;t want to add any additional behavior to `IconButton`. The way I see it, no conditional logic should be placed in `IconButton`. All it should do is represent an icon and button and not have to worry about any browser events. That&#39;s what `ToggleIconButton` is for. 

While I know I could wrap a `React Div` around `IconButton` and write an `onClick` listener there (I&#39;ve tried this and it works), it seems like that&#39;s a bit janky. 

Does anybody know a good way of doing this? Thanks guys!

  [1]: http://i.stack.imgur.com/psLJt.png

ReactJS: onClick handler not firing when placed on a child component

I&#39;m trying to iterate through all the keys in a hash, but no output is returned from the loop. `console.log()` outputs as expected. Any idea why the JSX isn&#39;t returned and outputted correct?

    var DynamicForm = React.createClass({
      getInitialState: function() {
        var items = {};
        items[1] = { name: &#39;&#39;, populate_at: &#39;&#39;, same_as: &#39;&#39;, 
                     autocomplete_from: &#39;&#39;, title: &#39;&#39; };
        items[2] = { name: &#39;&#39;, populate_at: &#39;&#39;, same_as: &#39;&#39;, 
                     autocomplete_from: &#39;&#39;, title: &#39;&#39; };
        return {  items  };
      },

      
      
      render: function() {
        return (
          &lt;div&gt;
          // {this.state.items.map(function(object, i){
          //  ^ This worked previously when items was an array.
            { Object.keys(this.state.items).forEach(function (key) {
              console.log(&#39;key: &#39;, key);  // Returns key: 1 and key: 2
              return (
                &lt;div&gt;
                  &lt;FieldName/&gt;
                  &lt;PopulateAtCheckboxes populate_at={data.populate_at} /&gt;
                &lt;/div&gt;
                );
            }, this)}
            &lt;button onClick={this.newFieldEntry}&gt;Create a new field&lt;/button&gt;
            &lt;button onClick={this.saveAndContinue}&gt;Save and Continue&lt;/button&gt;
          &lt;/div&gt;
        );
      }

React JSX: Iterating through a hash and returning JSX elements for each key

I would like to be able to use autocomplete for html tags in my react/jsx code. The same way it works for html files. Can i configure sublime text 3 to enable tags autocomplete for jsx files?

Autocomplete html tags in jsx (sublime text)

When casting in a `.tsx` file, the compiler assumes it to be JSX, e.g.:

    (&lt;HtmlInputElement&gt; event.target).value

gives an error

&gt; JSX element type &#39;HtmlInputElement&#39; is not a constructor function for JSX elements

How do you cast TypeScript in a `.tsx` file?

How to use a TypeScript cast with JSX/TSX

I&#39;m unable to get any of the React `SyntheticKeyboardEvent` handlers to register anything except `null` for the event properties.

I&#39;ve isolated the component in a fiddle and am getting the same result as in my application. Can anyone see what I&#39;m doing wrong?

[http://jsfiddle.net/kb3gN/1405/][1]
    
    var Hello = React.createClass({
        render: function() {
          return (
          &lt;div&gt;
            &lt;p contentEditable=&quot;true&quot;
               onKeyDown={this.handleKeyDown}
               onKeyUp={this.handleKeyUp}
               onKeyPress={this.handleKeyPress}&gt;Foobar&lt;/p&gt;
            &lt;textarea
               onKeyDown={this.handleKeyDown}
               onKeyUp={this.handleKeyUp}
               onKeyPress={this.handleKeyPress}&gt;
            &lt;/textarea&gt;
            &lt;div&gt;
              &lt;input type=&quot;text&quot; name=&quot;foo&quot; 
               onKeyDown={this.handleKeyDown}
               onKeyUp={this.handleKeyUp}
               onKeyPress={this.handleKeyPress} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          );
        },
        
        handleKeyDown: function(e) {
          console.log(e);
        },
        
        handleKeyUp: function(e) {
         console.log(e);
        },
        
        handleKeyPress: function(e) {
         console.log(e); 
        }
    });
     
    React.renderComponent(&lt;Hello /&gt;, document.body);


  [1]: http://jsfiddle.net/kb3gN/1405/

React: Keyboard Event Handlers All &#39;Null&#39;

In Atom Editor I installed the following plugins

 1. linter 
 2. linter-eslint

It seems they don&#39;t recognize the JSX syntaxis. 

I have it working on the command line but had to use other plugins like `esprima-fb` and `eslint-plugin-react`. Looks like there are no such plugins for Atom Editor and would like to know if anyone of you knows a way to hack around this.

How to config ESLint for React on Atom Editor

I&#39;m trying to replace parts of a string with JSX tags, like so:

    render: function() {
        result = this.props.text.replace(&quot;:&quot;,&lt;div className=&quot;spacer&quot;&gt;&lt;/div&gt;);
        return (
             &lt;div&gt;        
                 {result}
             &lt;div&gt;        
        );
    }

But given that `this.props.text` is `Lorem : ipsum`, it results in

    &lt;div&gt;
        Lorem [object Object] ipsum.
    &lt;/div&gt;

Is there a way to solve this or another way to replace parts of a string with JSX tags?

Replace part of string with tag in JSX

What does JSX stand for?

I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS.

What does JSX stand for?

I&#39;m trying to output a list of comma separated links and this is my solution.

    var Item = React.createComponent({
      render: function() {

        var tags = [],
            tag;

        for (var i = 0, l = item.tags.length; i &lt; l; i++) {
          if (i === item.tags.length - 1) {
            tag = &lt;span&gt;&lt;Tag key={i} tag={item.tags[i]} /&gt;&lt;/span&gt;;
          } else {
            tag = &lt;span&gt;&lt;Tag key={i} tag={item.tags[i]} /&gt;&lt;span&gt;, &lt;/span&gt;&lt;/span&gt;;
          }
          tags.push(tag);
        }

        return (
          &lt;tr&gt;
            &lt;td&gt;
              {item.name}
            &lt;/td&gt;
            &lt;td&gt;
              {tags}
            &lt;/td&gt;
          &lt;/tr&gt;
        );

      }
    });

I was just wondering if there was a better, more clean way to accomplish this?

Thanks

Rendering comma separated list of links

I have an array with items and I want to make something like this:

    &lt;tr&gt;
    (until have items in array
    &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;)
    &lt;/tr&gt;

But if I do that, I get an JSXTransformer error : 
&gt;Adjacent XJS elements must be wrapped in an enclosing tag

Working version:

    {rows.map(function (rowElement){
        return (&lt;tr key={trKey++}&gt;
            &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{rowElement.row[0].value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{rowElement.row[0].count}&lt;/td&gt;
            &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{rowElement.row[1].value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{rowElement.row[1].count}&lt;/td&gt;
            &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{rowElement.row[2].value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{rowElement.row[2].count}&lt;/td&gt;
            &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{rowElement.row[3].value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{rowElement.row[3].count}&lt;/td&gt;
            &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{rowElement.row[4].value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{rowElement.row[4].count}&lt;/td&gt;
                     .......
            &lt;/tr&gt;);
    })}

I tried this one. But with `&lt;div&gt;` enclosing tag it doesn&#39;t work fine. 

**Answer here:**
[https://stackoverflow.com/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to][1]

    &lt;tbody&gt;
        {rows.map(function (rowElement){
            return (&lt;tr key={trKey++}&gt;
            {rowElement.row.map(function(ball){
                console.log(&#39;trKey:&#39;+trKey+&#39; td1stKey&#39;+td1stKey+&#39; ball.value:&#39;+ball.value+&#39; td2ndKey:&#39;+td2ndKey+&#39; ball.count:&#39;+ball.count);
                return(&lt;div key={divKey++}&gt;
                    &lt;td className=&#39;info&#39; key={td1stKey++}&gt;{ball.value}&lt;/td&gt;&lt;td key={td2ndKey++}&gt;{ball.count}&lt;/td&gt;
                &lt;/div&gt;);
            })}
            &lt;/tr&gt;);
        })}
    &lt;/tbody&gt;
&gt; **Please, advise me how to properly wrap few TD tags!**
I tried use a guide [Dynamic Children][2], but JSXTransformer doesn&#39;t allow me do that.


  [1]: https://stackoverflow.com/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to
  [2]: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

How to correctly wrap few TD tags for JSXTransformer?

I can&#39;t figure out why ReactJs is finding &quot;string&quot; instead of my click handler methods.

This is my code:

    define([&quot;react&quot;], function(React) {


	return React.createClass({

		pageUp: function() {
			console.log(&quot;go next page&quot;);
		},

		pageDown: function() {
			console.log(&quot;go prev page&quot;);
		},

		toggleMenu: function() {
			console.log(&quot;toggle menu&quot;);
			this.state.menuStatus = !this.menuStatus;
		},

		getInitialState: function() {
			return {
				// Toggle menu status; false -&gt; closed | true -&gt; opened
				menuStatus: false
			}
		},

		render: function() {
			var _this = this;
			return (
				&lt;div className=&quot;overlay-nav&quot;&gt;
					&lt;ul className=&quot;up-down-arrows&quot;&gt;
						&lt;li onClick=&quot;{this.pageUp}&quot; className=&quot;arrow-up&quot;&gt;&lt;i className=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;&lt;/li&gt;
						&lt;li onClick=&quot;{_this.pageDown.bind(_this)}&quot; className=&quot;arrow-down&quot;&gt;&lt;i className=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;&lt;/li&gt;
					&lt;/ul&gt;

					&lt;div onClick=&quot;{_this.toggleMenu}&quot; className=&quot;toggleMenu&quot;&gt;&lt;i className=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;/div&gt;
			);
		}
	});
});

I already tried to use

    var _this = _this
    // ....
    &lt;li onClick=&quot;_this.pageUp&quot; ...

and binds like

    &lt;li onClick=&quot;{this.pageUp.bind(this)}&quot;

But when I refresh the page, I always get this error:

The error I get is:

    Error: Expected onClick listener to be a function, instead got type string(…)

Any help is much appreciate.

tks

ReactJS: Expected onClick listener to be a function, instead got type string

For example, I wanna show a list of names. So I wanted to do something like this:

&lt;!-- language: lang-js --&gt;

    var returnValue;
    for (eachName of _names) {
      returnValue += (
      &lt;TouchableHighlight
        onPress={() =&gt; this._onPressButton}&gt;
          &lt;Text&gt;
          {eachName}
          &lt;/Text&gt;
      &lt;/TouchableHighlight&gt;);
    }
    return returnValue;


However, that is not valid. Which brings me to my question: How do I concatenate a dynamic amount of JSX components in React Native.

How to concatenate JSX components in React Native

How does one pass a prop without value to a react component?

    &lt;SomeComponent disableHeight&gt; {/* here */}
        {({width}) =&gt; (
            &lt;AnotherComponent
                autoHeight {/* and here */}
                width={width}
                height={300}
                {...otherProps}
            /&gt;
        )}
    &lt;/SomeComponent&gt;

Note - there is no default prop values specified for those props.

I can&#39;t seem to find any references on that, but by observing values for those properties they get assigned to `true` by default.

All React Jsx Solutions on Gang of Coders

Total of 36 React Jsx Solutions