SkillPies.com

Props

/

Basic Props

        type GreetingProps = {
  name: string;
}

const Greeting = (props: GreetingProps) => (
  <div>Hello: {props.name}</div>
)

const App = () => (
  <div>
    <Greeting name="Tomas" />
    <Greeting name="Valeria" />
  </div>
)

render(<App />);

        body { 
    padding: 16px; 
    font-size: 40px; 
}

Let's take a look at how can we create reusable Components through props, which is a short name for properties.
The best way to explore props, is through an example! Imagine we are creating a component, that should display a greeting to a currently logged in user. Therefore, we create a new Greeting component with one prop, called name.
First, we define a type of the Props, in our case with only one prop called name and string type. The general convention for the name of this type is the name of the component with a Prop suffix.
This component should display Hello, with a value of name prop next to it. Therefore, we include props as a single parameter of the React component, and use the value of the name prop through interpolation. Pretty easy huh? You can easily imagine how you can introduce, use and interpolate all kinds of props.

Props

/

Types and React.ReactNode

        type GreetingProps = {
  name: string;
}

const Greeting = (props: GreetingProps) => (
  <div>Hello: {props.name}</div>
)

const App = () => (
  <div>
    <Greeting name="Tomas" />
    <Greeting name="Valeria" />
  </div>
)

render(<App />);

        body { 
    padding: 16px; 
    font-size: 40px; 
}

Props

/

Types and React.ReactNode

      type GreetingProps = {
  name: string;
}

const Greeting = (props: GreetingProps) => (
  <div>Hello: {props.name}</div>
)

const App = () => (
  <div>
    <Greeting name="Tomas" />
    <Greeting name="Valeria" />
  </div>
)

render(<App />);

      body { 
    padding: 16px; 
    font-size: 40px; 
}

Let's talk shortly about how we control and check for types of props passed to React components. For this purpose we will use typescript, which allows for static, compile-time checking. In javascript, you employ a different strategy using run time checking. We prefer the static method as your errors are caught very early.
Currently, the type of the name prop is set to "string".
But what will happen if you try to pass a different type to the component? In our case, we will pass a number.
If you are using a typescript enabled editor such as Visual Studio Code, it will pick up the errors immediately as you type. In this case, it informs you that you are trying to pass a number where string was expected. But, what will happen if you try to execute your code?
Absolutely nothing! The code will still executes, as static typing of typescript is removed when transforming your code to javascript. But, many front end frameworks, such as NextJS inform of compilation when building the production version of your application.
To get rid of this pesky error, let's change the type of the property to number and the error will immediately disappear.
Of course, you can use union types to allow for multiple prop types.
But, what if you want to allow for a prop that takes arbitrary JSX?
For such purpose there is a special type in React, called ReactNode. This type envelops all the possible types you can render in react, including JSX. Therefore, if you want to allow for anything that can be rendered in React, you use the ReactNode type.
When you execute this code, you will find that both the number parameter and the JSX parameter correctly rendered.

Props

/

children

      type GroupProps = {
  name: string;
  children: React.ReactNode;
}

const Group = (props: GreetingProps) => (
  <fieldset>
    <legend>{props.name}</legend>
    {props.children}
  </fieldset>
)

const App = () => (
  <div>
    <Group name="To DO">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </Group>
    
    <Group name="Done">
      <ul>
        <li><s>Item 1</s></li>
        <li><s>Item 2</s></li>
      </ul>
    </Group>
  </div>
)

render(<App />);

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

So far we have been passing props only through element attributes. But how can we create a Ract component, that supports nested, hierarchical structures of html elements?
Let's consider a Group component, that will render a box with a title and some nested children ui, such as these lists of items to do.
Just like in standard HTML we want to be able to specify what elements will be rendered inside the component. Creating such a reusable component, we can create group boxes with different titles and content, such as the top one with a list of to do tasks.
Or the bottom one with a list of done tasks. So, how can we do this?
Enter the children prop.
First, we specify the structure of the Group component, rendering the fieldset and the title based on the prop name.
Then, we use the child prop to render the child component exactly where we want them to render, inside the fieldset, just after the header. Pretty cool huh?

Props

/

Destructuring

      const [a, b] = [1,2];
const { a, b, ...rest } = { a: 1, b: 2, c: 3 };

type Props = { name: string, age: number }

// no destructuring
const Greeting = (props) => (
  <div>
    Hello { props.name }, age { props.age }
  </div>
)

// destructuring
const Greeting = ({ name, ...rest }) => (
  <div>
    Hello { name }, age { rest.age }
  </div>
)

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

Props

/

Default Values

      type Props = { 
  name: string;
  age?: number;
}

const Greeting = ({ name, age = 44 }) => (
  <div>
    Hello { name }, your age { age }
  </div>
)

const App = () => (
  <>
    <Greeting name="Tomas" />
    <Greeting name="Valeria" age={30} />
  </>
)

render(<App />)

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

Props

/

Boolean props

      type Props = {
  name: string;
  age: number;
  showAge: boolean;
}

const App = () => (
  <>
    <Greeting 
        name="Tomas" 
        age={60} 
        showAge 
    />
    <Greeting 
        name="Valeria" 
        age={30}
        showAge={false}
    />
  </>
)

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

Props

/

Spread props

      const Greeting = (props) => (
  <div>
    <h1>Greeting</h1>
    <InnerGreeting showAge {...props} />
  </div> 
)

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

Props

/

Readonly

      const Greeting1 = (props) => {
  props.name = "Tomas"; // NO!

  return (
    <div>
      {props.name}
    </div> 
  )
}

const Greeting2 = ({ name }) => {
  name = "Tomas"; // NO!

  return (
    <div>
      {name}
    </div> 
  )
}

render(<Greeting1 />)

      body { 
    padding: 16px; 
    font-size: 40px; 
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 16px;
    font-family: monospace;
}

ul {
    list-style-type: square;
    padding-left: 30px;
}

Props

/

Full Stack Development

Component Props

Props

Basic Props

Props

Types and React.ReactNode

Props

Types and React.ReactNode

Props

children

Props

Destructuring

Props

Default Values

Props

Boolean props

Props

Spread props

Props

Readonly

Props

Exercise