React Props Basics

Custom elements can accept props as arguments.

App.tsx

export default function App() {
  return (
    <Example message="Hello Fam!" />
  );
}

type ExampleProps = {
  message: string,
};

const Example = (props: ExampleProps) => {
  return (
    <div>Message: {props.message}</div>
  );
}

ReactNode type

The type React.ReactNode can be used to accept any variable that react supports for rendering to the DOM.

App.tsx

export default function App() {
  return (
    <Example message={<b>Hello Fam!</b>} />
  );
}

type ExampleProps = {
  message: React.ReactNode;
}

const Example = (props: ExampleProps) => {
  return (
    <div>Message: {props.message}</div>
  );
}

Children Prop

The children prop has special meaning withing react and can be passed in between the opening and closing JSX tags.

App.tsx

export default function App() {
  return (
    <Example>
      <span>Hi <b>Fam!</b></span>
    </Example>
  );
}

type ExampleProps = {
  children?: React.ReactNode;
}

const Example = (props: ExampleProps) => {
  return (
    <div>
      {props.children}
    </div>
  );
}

Self Closing Tags and `children`

You can provide children for self closing tags as well.

App.tsx

export default function App() {
  return (
    <Example children={<span>Hi <b>Fam!</b></span>} />
  );
}

type ExampleProps = {
  children?: React.ReactNode;
}

const Example = (props: ExampleProps) => {
  return (
    <div>
      {props.children}
    </div>
  );
}

But it is not recommended to set the children prop explicitly, as its much more conventional to let children be passed in explicitly as the contents of an open/close JSX pair.

`React.PropsWithChildren` type

Instead of defining the children prop explicitly you can use the utility type React.PropsWithChildren.

App.tsx

export default function App() {
  return (
    <Example message='in a bottle'>
      are cute
    </Example>
  );
}

type ExampleProps = React.PropsWithChildren<{
  message: string,
}>;

const Example = (props: ExampleProps) => {
  return (
    <div>
      message {props.message}
      <br />
      children {props.children}
    </div>
  );
}

Prop Destructing and Default Values

You can use JavaScript destructuring to clean up the component function parameters. This even allows you to add default values to props.

App.tsx

export default function App() {
  return (
    <Example
      message='in a bottle'
    />
  );
}

type ExampleProps = {
  message: string,
  required?: boolean,
};

const Example = ({
  message,
  required = true,
}: ExampleProps) => {
  return (
    <div>
      message: {message}
      <br />
      required: {required ? 'true' : 'false'}
    </div>
  );
}

Shorthand Boolean Props

In JSX for boolean values for true you don't need to explicitly list them out like propName={true}. Instead if you just add propName it is implicitly passed set to true e.g. in the below example required means required={true}.

App.tsx

export default function App() {
  return (
    <Example
      required
    />
  );
}

type ExampleProps = {
  required: boolean,
};

const Example = ({
  required,
}: ExampleProps) => {
  return (
    <div>
      required: {required ? 'true' : 'false'}
    </div>
  );
}

Spread Props

You can spread props from an object by using {...props}.

App.tsx

export default function App() {
  const props: ExampleProps = {
    song: 'message in a bottle',
    by: 'police'
  };
  return (
    <Example
      {...props}
    />
  );
}

type ExampleProps = {
  song: string,
  by: string,
};
const Example = ({ song, by }: ExampleProps) => {
  return (
    <div>
      <i>{song}</i>
      <br />
      by <b>{by}</b>
    </div>
  );
}

Props are readonly

You cannot mutate the props object that gets passed into the react component. If you attempt a mutation the component will fail. This can be observed in the following example which will fail to render as we try to mutate the props object.

App.tsx

export default function App() {
  return (
    <Example message='Hello' />
  );
}

type ExampleProps = {
  message: string,
};

const Example = (props: ExampleProps) => {
  // ❌ this will cause a runtime error
  // 🤕 The component will not render
  props.message = 'Attempt Mutation 🦁'; 
  return (
    <div>{props.message}</div>
  );
};

Transcript