react-jsx

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 = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); } Jack Allan Just leave banner as being undefined and it does not get included. What about this. Let's define a simple helping If component. var If =

In plain old javascript I have the DIV <div class="movie" id="my_movie"> and the following javascript code var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); Now I have a React Component, inside this component, in the render method, I am returning my div. How can I add a event listener for my custom event? (I am using this library for TV apps - https://github.com/ahiipsa/navigation ) import React, { Component } from 'react'; class MovieItem extends Component { render() { if(this.props.index === 0) { return

For some reason the value of this is being lost in react event handler. Reading the docs I thought that react did some stuff here to make sure this was set to the correct value The following doesn't work as I'd expect import React from 'react'; export default class Observer extends React.Component { handleClick() { console.log(this); //logs undefined } render() { return ( <button onClick={this.handleClick}>Click</button> ); } } But this does: import React from 'react'; export default class Observer extends React.Component { handleClick() { console.log(this); //logs Observer class instance }

How can I get a proper syntax highlighting in Visual Studio 2015 for JSX with ES2015 code? It works fine if I remove the import and export keywords: I just updated to Visual Studio 2015 Enterprise Update 1 but it still remains the same. Adam Weber UPDATE (2017-02) Node Tools for Visual Studio (NTVS) has been using the Salsa analysis engine since v1.2 and using NTVS is likely the path of least resistance for JSX support. https://github.com/Microsoft/nodejstools Read (and upvote) this answer for more details: https://stackoverflow.com/a/41996170/9324 ORIGINAL ANSWER I ran into the same issue and

I am building something with React where I need to insert HTML with React Variables in JSX. Is there a way to have a variable like so: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; and to insert it into react like so, and have it work? render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } and have it insert the HTML as expected? I haven't seen or heard anything about a react function that could do this inline, or a method of parsing things that would allow this to work. Douglas You can use dangerouslySetInnerHTML , e.g. render: function() {

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't work (which makes some sense since the render method just returns an object). Here's a code example: export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}>