if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:

For parent-child communication, simply pass props. For child-parent

There's another (uncommon) way of communicating between components: simply expose a method

Specifying the value prop on a controlled component prevents the user from changing the input unless

Improper use of the innerHTML can open you up to a cross-site scripting

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the

This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly.

Here's how false renders in different situations: Renders as id="false":

You can't access the children of your component through this.props.children. this.props.children designates the children being passed onto

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within