react-jsx

In my JSX, I have a case of a conditional rendering logic - when element A renders something (it's render() function returns something other than null ), then also render element B, just above the element A. Code example (simplified) would look like this: function render() { let elemA = (<ElementA someProp={this.someVar} />); if (elemA.isNull()) { return ( <div> { ...someElements } </div> ); } return ( <div> { ...someElements } <ElementB /> { elemA } </div> ); } So my question is - Is there any way to have the elemA.isNull() check? No, there's no way to determine what a child will render using

I have a rather simple problem and I'm not sure how to solve it with React's one way data flow. Say you have a link in the parent that shows a modal In the modal, you have an "X" that closes it. I know I can change the state of the modal from the parent via props // In the parent <Modal display={this.state.showModal} /> // In the modal <div className={this.props.display ? "show" : "hide"}> <a className="close">×</a> ... </div> And I know how to close the modal, but not both. Not sure how to keep a state that is shared and controllable by both the parent and the child modal. UPDATE In trying to

On line 4 of the following code, ESLint is giving me a parsing error saying: Unexpected token = I'm wondering why this is the case? The code runs properly. What am I doing wrong? import { Component, PropTypes } from 'react'; export default class MainApp extends Component { static propTypes = { children: PropTypes.any.isRequired } componentWillMount() { require('./styles/main.styl'); } render() { return ( <div> {this.props.children} </div> ); } } You cannot have properties inside classes, you can only have methods. Reference: http://www.2ality.com/2015/02/es6-classes-final.html#inside_the_body

I'm using PHPStorm 8.0.3 for my current project, but unfortunately it doesn't support JSX. In my React components (which are then compiled by Browserify) HTML gets underlined in red and invalidated: This is just a small component, but it surely gets pretty annoying with bigger ones. Also code formatting doesn't work as expected. Is there a (hard to find) setting which enables the correct syntax highlighting? If there is no such setting, is it possible to download a corresponding package? If there is no support at all, how do I extend PHPStorm (maybe by a custom Color/Syntax Schema) to accept

My project use react with typescript. I need to use react-breadcrumbs to show Breadcrumb for react-router. Now I add two @type package to My package.json "dependencies": { "@types/react-breadcrumbs": "^1.3.7", "@types/react-router": "^3.0.8" } react-breadcrumb need to use route.props.name to show name for breadcrumb, but when I use @type package in npm the Route.d.ts file has not name Props in the interface RouteProps. interface RouteProps extends IndexRouteProps { path?: RoutePattern; } interface IndexRouteProps { component?: RouteComponent; components?: RouteComponents; getComponent?:

class App extends Component { constructor(props) { super(props); this.state = { Card: Card } } HandleEvent = (props) => { this.SetState({Card: Card.Active} } render() { return ( <Card Card = { this.state.Card } HandleEvent={ this.handleEvent }/> <Card Card = { this.state.Card } HandleEvent={ this.handleEvent }/> ) } } const Card = props => { return ( <div style={props.state.Card} onClick={ props.HandleEvent}>Example</div> ) } Every time I click on one of the cards all of my elements change states, how do I program this to only change card that I clicked? Here's a working example import React,