createElement

const element = createElement(type, props, ...children)

• Reference
  • createElement(type, props, ...children)
• Usage
  • Creating an element without JSX

Reference

createElement(type, props, ...children)

Panggil createElement untuk membuat elemen React dengan parameter type, props, dan children.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

Lihat lebih banyak contoh lainnya di bawah ini.

Parameters

• type: Argument type harus berupa tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti Fragment).

• props: Argumen props harus berupa objek atau null. Jika Anda mengoper null, itu akan diperlakukan sama seperti objek kosong. React akan membuat elemen dengan props yang cocok dengan props yang telah Anda oper. Perhatikan bahwa ref dan key dari objek props Anda adalah spesial dan tidak akan tersedia sebagai element.props.ref dan element.props.key pada element yang dikembalikan. Mereka akan tersedia sebagai element.ref dan element.key.

• optional ...children: Nol atau lebih simpul anak. Mereka bisa berupa simpul React apa saja, termasuk elemen React, string, angka, portal, simpul kosong (null, undefined, true, dan false), dan array simpul React.

Returns

createElement returns a React element object with a few properties:

• type: The type you have passed.
• props: The props you have passed except for ref and key. If the type is a component with legacy type.defaultProps, then any missing or undefined props will get the values from type.defaultProps.
• ref: The ref you have passed. If missing, null.
• key: The key you have passed, coerced to a string. If missing, null.

Usually, you’ll return the element from your component or make it a child of another element. Although you may read the element’s properties, it’s best to treat every element as opaque after it’s created, and only render it.

Caveats

• You must treat React elements and their props as immutable and never change their contents after creation. In development, React will freeze the returned element and its props property shallowly to enforce this.

• When you use JSX, you must start a tag with a capital letter to render your own custom component. In other words, <Something /> is equivalent to createElement(Something), but <something /> (lowercase) is equivalent to createElement('something') (note it’s a string, so it will be treated as a built-in HTML tag).

• You should only pass children as multiple arguments to createElement if they are all statically known, like createElement('h1', {}, child1, child2, child3). If your children are dynamic, pass the entire array as the third argument: createElement('ul', {}, listItems). This ensures that React will warn you about missing keys for any dynamic lists. For static lists this is not necessary because they never reorder.

Usage

Creating an element without JSX

If you don’t like JSX or can’t use it in your project, you can use createElement as an alternative.

To create an element without JSX, call createElement with some type, props, and children:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

The children are optional, and you can pass as many as you need (the example above has three children). This code will display a <h1> header with a greeting. For comparison, here is the same example rewritten with JSX:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

To render your own React component, pass a function like Greeting as the type instead of a string like 'h1':

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

With JSX, it would look like this:

export default function App() {
  return <Greeting name="Taylor" />;
}

Here is a complete example written with createElement:

And here is the same example written using JSX:

Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to createElement is that it’s easy to see which closing tag corresponds to which opening tag.

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}