Components

React · 8 entries

Function Component

syntax

function ComponentName(props) {
  return <JSX />;
}
// or arrow function
const ComponentName = (props) => <JSX />;

example

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

// Usage
<Greeting name="Amara" />

output

Renders: <h1>Welcome, Amara!</h1>

Note Component names must start with a capital letter. React treats lowercase tags as native HTML elements.

create componentfunction componentdefine componentbasic component

Props

syntax

function Component({ propA, propB }) { ... }
// or
function Component(props) {
  const { propA, propB } = props;
}

example

function UserCard({ username, role, isActive }) {
  return (
    <div>
      <strong>{username}</strong>
      <span>{role}</span>
      {isActive && <span>Online</span>}
    </div>
  );
}

output

Renders the user card with username, role, and optional online badge.

Note Props are read-only. Never mutate a prop directly inside a component. Destructuring in the parameter list is the most common pattern.

pass propscomponent propsreceive propsdestructure props

Children Prop

syntax

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

example

function Card({ children, title }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

// Usage
<Card title="Profile">
  <p>This content is passed as children.</p>
</Card>

output

Renders a card wrapper around the paragraph.

Note children can be any renderable content: text, elements, arrays, or even functions (for render props).

children propwrapper componentpass childrennested contentslot pattern

Default Prop Values

syntax

function Component({ propA = defaultValue }) { ... }

example

function Badge({ label = "Member", color = "gray" }) {
  return (
    <span style={{ backgroundColor: color }}>
      {label}
    </span>
  );
}

// Uses defaults
<Badge />
// Overrides
<Badge label="Admin" color="crimson" />

output

First renders "Member" with gray background. Second renders "Admin" with crimson.

Note Use default parameter values in the destructuring rather than the legacy defaultProps static property, which is deprecated in React 19.

default propsoptional propsdefault valuesfallback props

Component Composition

syntax

function Parent() {
  return (
    <Layout>
      <Header />
      <Content />
      <Footer />
    </Layout>
  );
}

example

function PageLayout({ sidebar, content }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{content}</main>
    </div>
  );
}

function Dashboard() {
  return (
    <PageLayout
      sidebar={<NavMenu />}
      content={<StatsPanel />}
    />
  );
}

Note Composition via props is preferred over inheritance. Passing components as props gives you flexible "slot" patterns without tightly coupling parent and child.

compose componentscomponent compositionslot patternlayout componentcomponent architecture

Conditional Rendering

syntax

{condition && <Component />}
{condition ? <A /> : <B />}
if (condition) return <A />; return <B />;

example

function Notification({ message, type }) {
  if (!message) return null;

  return (
    <div className={`alert alert-${type}`}>
      {type === "error" ? "Error: " : "Info: "}
      {message}
    </div>
  );
}

output

Returns null when no message. Otherwise renders an alert with type prefix.

Note Returning null renders nothing. Watch out with &&: if the left side is 0, React renders "0" because it is a valid JSX child. Use Boolean(count) && <Component /> or count > 0 && <Component /> instead.

conditional renderingshow hide componentrender conditionallyternary jsxtoggle visibility

Lists & Keys

syntax

{items.map(item => (
  <Component key={item.uniqueId} {...item} />
))}

example

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <span>{task.title}</span>
          {task.done && <span> (completed)</span>}
        </li>
      ))}
    </ul>
  );
}

Note Keys must be stable, unique among siblings, and derived from data (like a database ID). Never use array index as key if the list order can change -- it causes subtle rendering bugs and broken state.

render listmap arraylist keyrender arraydynamic list

Fragments

syntax

<React.Fragment>...</React.Fragment>
// Short syntax
<>...</>

example

function UserInfo({ name, email }) {
  return (
    <>
      <dt>{name}</dt>
      <dd>{email}</dd>
    </>
  );
}

// With key (long syntax required)
function GlossaryList({ items }) {
  return (
    <dl>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Note Fragments let you group elements without adding extra DOM nodes. Use the long syntax <React.Fragment key={...}> when mapping a list, since the short syntax does not support the key attribute.

fragmentgroup elementsno wrapper divmultiple elementsadjacent elements