react passing props strategies

In the ground since Sat Nov 08 2025

Last watered inSat Nov 08 2025

Passing Props Strategies

Basic Flow

The basic flow is simple as attributing a variable references or primitive values

1const ChildComponent = ({ value, counter }: { value: string, counter: number }) => {
2  
3  return <div>
4    <h1>{value}</h1>
5    <p>{counter}</p>
6  </div>;
7};
8
9const ParentComponent = () => {
10  const text = "Hello"; // Variable reference
11
12  return (
13    <ChildComponent value={text} counter={1} /*Primitive value */  />
14  );
15};

Children

This is where we render everything between the opening and closing tags of the parent component.

1const ChildComponent = () => {
2  return <div>Child Component</div>;
3};
4
5const ParentComponent = ({ children }: { children: React.ReactNode }) => {
6  return (
7    <div>
8      {children}
9    </div>
10  );
11};

Components

1import AppList from "@components/AppList";
2
3const ParentComponent = () => {
4  return <ChildComponent List={AppList} />;
5};

Component Props

1const ParentComponent = () => {
2  return <ChildComponent value={value} counter={1} />;
3};

Blockquote

Blockquote blockquote oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam. oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.

Callout

Code

1import * as React from "react";
2
3const ParentComponent = () => {
4  return (
5    <themeContext.Provider value="dark">
6      <ChildComponent />
7    </themeContext.Provider>
8  );
9};
10
11const ChildComponent = () => {
12  const theme = React.useContext(themeContext);
13
14  return <div>Theme is {theme}</div>;
15};

Unorderd List

One
Two
Three

Ordered List

One
Two
Three