Mario Brusarosco

react passing props strategies

In the ground since Sat Nov 08 2025

Last watered inSat Nov 08 2025

Related Topics

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

  1. One
  2. Two
  3. Three