cf.completefrontend

Write the codeMedium

Write a minimal createElement(type, config, ...children)

Write createElement, the function JSX used to compile to. It returns an element object: { $$typeof, type, key, props }, where $$typeof is Symbol.for("react.transitional.element"), the mark React 19 checks.

key comes out of config as a string, or null when there's none, and isn't in props. Every other entry of config goes into props, including ref, which React 19 treats as a prop. config may be null, and you must not change the object you're given.

The children arguments become props.children, always an array, to make rendering simpler: nested arrays (like the result of a map) are flattened, and null, undefined, true, and false are left out. Strings, numbers (0 included), and elements stay as they are.

createElement("ul", { className: "menu" },
  ["Tea", "Cake"].map((name) => createElement("li", { key: name }, name)),
  null,
);
// {
//   $$typeof: Symbol(react.transitional.element),
//   type: "ul",
//   key: null,
//   props: { className: "menu", children: [<li key "Tea">, <li key "Cake">] },
// }
Write this (createElement.js)
export function createElement(type, config, ...children) {
  // Return { $$typeof, type, key, props }.
}
The checks your code must pass
  • returns an element with $$typeof, type, key, and props
  • takes the key out of the props, as a string
  • doesn't change the config object
  • accepts a null config and no children
  • flattens nested arrays of children
  • drops null, undefined, and booleans but keeps 0
  • keeps a component type and a ref in the props

The answer

Write it yourself first. Then compare it with a reference solution and the checks it passes.

Checking your sign-in…