Passing Props Strategies

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};

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};

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

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

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};