Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

&& operator

{ isYes && <A />}

? : operator

isYes ? Yes() : No()

• In React, you control branching logic with JavaScript.
• You can return a JSX expression conditionally with an if statement.
• You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
• In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
• In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
• The shortcuts are common, but you don’t have to use them if you prefer plain if.

References

React Doc

Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.

• When you want to coordinate two components, move their state to their common parent.
• Then pass the information down through props from their common parent.
• Finally, pass the event handlers down so that the children can change the parent’s state.
• It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).

There are many default browser actions:

1. mousedown – starts the selection (move the mouse to select).
2. click on <input type="checkbox"> – checks/unchecks the input.
3. submit – clicking an <input type="submit"> or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it.
4. keydown – pressing a key may lead to adding a character into a field, or other actions. contextmenu – the event happens on a right-click, the action is to show the browser context menu.
5. …there are more…

All the default actions can be prevented if we want to handle the event exclusively by JavaScript.

To prevent a default action – use either event.preventDefault() or return false. The second method works only for handlers assigned with on<event>.

The passive: true option of addEventListener tells the browser that the action is not going to be prevented. That’s useful for some mobile events, like touchstart and touchmove, to tell the browser that it should not wait for all handlers to finish before scrolling.

If the default action was prevented, the value of event.defaultPrevented becomes true, otherwise it’s false.

References

javascript info

A component with its own local state is often referred to as uncontrolled.

In contrast, a component is considered controlled when its key data and behavior are managed externally through props, rather than relying on its own local state. This approach allows the parent component to have full control over its behavior and data flow.

When designing a component, carefully consider which pieces of information should be controlled (managed via props) and which should remain uncontrolled (handled by the component’s state). However, keep in mind that you’re not locked into your initial decision—you can always refactor later as the needs of your application evolve.

References

React Doc, Freecodecamp