How do I use default props in a React component with Typescript?

Question

I am new to React and I have a simple child-component. I want to set default props so if no prop is given when the component is called it uses whatever the defaults are set at. So far I have:

import React from 'react';

interface titleComponentProps {
  title?: string;
}

const titleComponentDefaults = ({
  title: "default title",
})

const titleComponent = ({
  title,
}: titleComponentProps) => {
  return <React.Fragment>{title}</React.Fragment>;
};

export default DynamicHelperText;

I am unclear as to how to have the default props appear in the component. Would anyone know the best way to do this?

Alex Wayne · Accepted Answer · 2020-04-20 23:22:00Z

5

You should be able to pass a default value as you would any argument in a function.

const TitleComponent = ({
  title = 'Default Title',
}: TitleComponentProps) => {
  return <React.Fragment>{title}</React.Fragment>;
};

Your Prop type is correct as title?: string since the ? indicates that you can omit that parameter when calling the component.

answered Apr 20, 2020 at 23:22

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I use default props in a React component with Typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related