MENU

React.X

React.createElement(component[, props[, ...children]])

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. (Modern build tools compile JSX to calls to jsx()/jsxs() from the automatic JSX runtime instead of literal React.createElement calls, but the resulting elements are equivalent — and createElement remains available whenever you need to build an element by hand.)

Example 1:

<MyButton color="blue" shadowSize={2}>
  Click Me</MyButton>

<MyButton color="blue" shadowSize={2}>
  Click Me</MyButton>

compiles into:

Example 2:

<div className="sidebar" />

<div className="sidebar" />

compiles into:

React.cloneElement(element [,config [, ...children]])

This clones and returns a new React element using 'element' as the starting point. 'config' should contain all new props, key, or ref. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. 'key' and 'ref' from the original element will be preserved if no key and ref present in the config. It is almost equivalent to:

<element.type {...element.props} {...props}>{children}</element.type>

<element.type {...element.props} {...props}>{children}</element.type>

However, it also preserves refs. This means that if you get a child with a ref on it, you won't accidentally steal it from your ancestor. You will get the same ref attached to your new element. The new ref or key will replace old ones if present.

React.isValidElement(object)

This verifies the object is a React element, returning true or false.

React.Children

This provides utilities for dealing with the opaque data structure of props.children.

React.Children.map(children, function[(thisArg)])

Invokes a function on every immediate child contained within children with this set to thisArg. If 'children' is an array it will be traversed and the function will be called for each child in the array. If 'children' is null or undefined, this method will return null or undefined rather than an array. If 'children' is a Fragment it will be treated as a single child and not traversed.

const OpaqueWrapper = ({ children }) => (
  React.Children.map(children, child => (
    <Wrapper>
      {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
    </Wrapper>
  ))
);

const OpaqueWrapper = ({ children }) => (
  React.Children.map(children, child => (
    <Wrapper>
      {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
    </Wrapper>
  ))
);

React.Children.forEach(children, function[(thisArg)])

Like React.Children.map() but does not return an array.

React.Children.count(children)

Returns the total number of components in children, equal to the number of times that a callback passed to map() or forEach() would be invoked.

React.Children.only(children)

Verifies that 'children' has only one child (a React element) and returns it. Otherwise, this method throws an error.

React.Children.toArray(children)

Returns the 'children' opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your components, especially if you want to reorder or slice props.children before passing it down. It changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray() prefixes each key in the returned array so that each element's key is scoped to the input array containing it.

Though identical, Children.map() is more performant than Children.toArray().map(). Below, Children.toArray(children) skips 'null' or 'undefined' and the length of the result will be 1. However, Children.map(children, x => x) also iterates with null, and the length will be 2.

<ReactComponent>
  <div>one</div>
  { null }
</ReactComponent>

<ReactComponent>
  <div>one</div>
  { null }
</ReactComponent>