09_Functional Components — Ways to Create, Call & Children Prop - Maniconserve/React-Wiki GitHub Wiki

The classic way. Uses the function keyword.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

The modern, concise way. Most commonly used in React projects today.

const Greeting = () => {
  return <h1>Hello, World!</h1>;
};

If the JSX fits in one expression, you can skip the return keyword and { } by wrapping JSX in ( ).

const Greeting = () => (
  <h1>Hello, World!</h1>
);

Only works when you are returning JSX directly with no logic before it.

For very simple components with a single element and no wrapping needed.

const Greeting = () => <h1>Hello, World!</h1>;

Use when the component has no children content passed into it.

<Greeting />

Use when you want to pass children content inside the component.

<Greeting>Some content here</Greeting>

Pass data into the component using attributes.

<Greeting name="Arjun" age={22} />

You can store a component call in a variable and use it in JSX.

const greetingElement = <Greeting name="Arjun" />;
function App() {
return (
<div>
{greetingElement}
</div>
);
}

Technically works but bypasses React's rendering system — avoid this.

// ❌ Avoid
{Greeting()}
// ✅ Always use JSX tag syntax
<Greeting />

Every component automatically receives a special prop called children. It holds whatever JSX or content is placed between the opening and closing tags of a component.

function Card(props) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
      {props.children}
    </div>
  );
}
// Usage — anything between <Card> and </Card> becomes props.children
function App() {
return (
<Card>
<h2>My Title</h2>
<p>Some description text here.</p>
</Card>
);
}

Renders:

┌─────────────────────────────┐
│ My Title                    │
│ Some description text here. │
└─────────────────────────────┘

The Card component does not need to know what is inside it — it just wraps and displays whatever is passed as children.

Instead of writing props.children, you can destructure directly in the parameter.

function Card({ children }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '20px' }}>
      {children}
    </div>
  );
}

Children are not limited to JSX elements — they can be text, numbers, other components, or a mix.

// Plain text
<Card>Just some plain text</Card>
// Number
<Card>{42}</Card>
// Another component
<Card>
<Greeting name="Arjun" />
</Card>
// Mix of everything
<Card>
<h2>Title</h2>
<p>Paragraph</p>
<button>Click Me</button>
</Card>

children is just a prop — it works alongside any other props you define.

function Alert({ type, children }) {
  const colors = {
    success: '#d4edda',
    error:   '#f8d7da',
    warning: '#fff3cd',
  };
return (
<div style={{ backgroundColor: colors[type], padding: '12px', borderRadius: '4px' }}>
{children}
</div>
);
}
// Usage
function App() {
return (
<div>
<Alert type="success">
<strong>Done!</strong> Your file was saved.
</Alert>
  &lt;Alert type="error"&gt;
    &lt;strong&gt;Oops!&lt;/strong&gt; Something went wrong.
  &lt;/Alert&gt;

  &lt;Alert type="warning"&gt;
    Please review before submitting.
  &lt;/Alert&gt;
&lt;/div&gt;

);
}

// A — Function Declaration
function Box() {
  return <div className="box">Hello</div>;
}
// B — Arrow Function with return
const Box = () => {
return <div className="box">Hello</div>;
};
// C — Arrow Function with implicit return
const Box = () => (
<div className="box">Hello</div>
);
// D — Arrow Function single line
const Box = () => <div className="box">Hello</div>;
// All four render exactly the same output

Part of the React Project Wiki — see also: React Components · JSX Attributes & Expressions · Component Styling

The classic way. Uses the function keyword.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

The modern, concise way. Most commonly used in React projects today.

const Greeting = () => {
  return <h1>Hello, World!</h1>;
};

If the JSX fits in one expression, you can skip the return keyword and { } by wrapping JSX in ( ).

const Greeting = () => (
  <h1>Hello, World!</h1>
);

Only works when you are returning JSX directly with no logic before it.

For very simple components with a single element and no wrapping needed.

const Greeting = () => <h1>Hello, World!</h1>;

Use when the component has no children content passed into it.

<Greeting />

Use when you want to pass children content inside the component.

<Greeting>Some content here</Greeting>

Pass data into the component using attributes.

<Greeting name="Arjun" age={22} />

You can store a component call in a variable and use it in JSX.

const greetingElement = <Greeting name="Arjun" />;

function App() {
  return (
    <div>
      {greetingElement}
    </div>
  );
}

Technically works but bypasses React's rendering system — avoid this.

// ❌ Avoid
{Greeting()}

// ✅ Always use JSX tag syntax
<Greeting />

Every component automatically receives a special prop called children. It holds whatever JSX or content is placed between the opening and closing tags of a component.

function Card(props) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
      {props.children}
    </div>
  );
}

// Usage — anything between <Card> and </Card> becomes props.children
function App() {
  return (
    <Card>
      <h2>My Title</h2>
      <p>Some description text here.</p>
    </Card>
  );
}

Renders:

┌─────────────────────────────┐
│ My Title                    │
│ Some description text here. │
└─────────────────────────────┘

The Card component does not need to know what is inside it — it just wraps and displays whatever is passed as children.

Instead of writing props.children, you can destructure directly in the parameter.

function Card({ children }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '20px' }}>
      {children}
    </div>
  );
}

Children are not limited to JSX elements — they can be text, numbers, other components, or a mix.

// Plain text
<Card>Just some plain text</Card>

// Number
<Card>{42}</Card>

// Another component
<Card>
  <Greeting name="Arjun" />
</Card>

// Mix of everything
<Card>
  <h2>Title</h2>
  <p>Paragraph</p>
  <button>Click Me</button>
</Card>

children is just a prop — it works alongside any other props you define.

function Alert({ type, children }) {
  const colors = {
    success: '#d4edda',
    error:   '#f8d7da',
    warning: '#fff3cd',
  };

  return (
    <div style={{ backgroundColor: colors[type], padding: '12px', borderRadius: '4px' }}>
      {children}
    </div>
  );
}

// Usage
function App() {
  return (
    <div>
      <Alert type="success">
        <strong>Done!</strong> Your file was saved.
      </Alert>

      <Alert type="error">
        <strong>Oops!</strong> Something went wrong.
      </Alert>

      <Alert type="warning">
        Please review before submitting.
      </Alert>
    </div>
  );
}

// A — Function Declaration
function Box() {
  return <div className="box">Hello</div>;
}

// B — Arrow Function with return
const Box = () => {
  return <div className="box">Hello</div>;
};

// C — Arrow Function with implicit return
const Box = () => (
  <div className="box">Hello</div>
);

// D — Arrow Function single line
const Box = () => <div className="box">Hello</div>;

// All four render exactly the same output