How to pass this TypeScript React component an optional prop?

user_12027858 0
Viewed 2398

I'm fairly new to TS and trying to understand how to pass optional props to this component that's a bit complex for me. I thought you could use a ? for the props that you want to be optional, but I'm getting the following error:

A binding pattern parameter cannot be optional in an implementation signature.

How would I pass optional props to this component?

With Optional Props

export const BGVideo = React.memo(function BGVideo({ src, children, bgColor? }: any) {
  return (                                                          ^^^^^^^^
    <BackgroundVideoContainer>...some other stuff...
  )
});

Original

export const BGVideo = React.memo(function BGVideo({ src, children }: any) {
  return (
    <BackgroundVideoContainer>...some other stuff...
  )
});
react-typescript typescript reactjs
3 Answers

What you're thinking of is declaring an optional property of a type. For instance:

interface Props { bgColor?: string }
const a: Props = { bgColor: '#fff' } // valid
const b: Props = {}                  // valid

But the only type in your code here is any, which is not a good practice to use as it disables all type checking.

So what you want to do is delcare the type for your props, which includes the optional property:

interface Props {
    src: string,
    children: React.ReactNode
    bgColor?: string
}

Then use that type.

export function BGVideo({ src, children, bgColor }: Props) {
  return (
    <>...</>
  )
}

Now in that function, bgColor has the type string | undefined. A string if it was passed a value, or undefined if it was not passed a value.

Working example

Lastly, React.memo really isn't necesary. You shouldn't really ever need to wrap a function component in this way. React.memo is more for values which you don't want to have to recompute.

Squeegy_620760

try that:

type Props = {
    src: string;
    bgColor?: string;
    children: React.ReactNode;
}
export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: Props) {
    return (
        <BackgroundVideoContainer>...some other stuff...
    )
});
user_10338720

The Object where you are trying to add optional prop is a destructured props object and not the type of props object.

You can add type for props object as follows:

export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: {src: string, children: React.ReactNode, bgColor?: string}) {
  return (
    <BackgroundVideoContainer>...some other stuff...
  )
});

Or better extract the type in a interface or type for better readability:

interface BGVideoProps {
      src: string; 
      children: React.ReactNode; 
      bgColor?: string;
    }

export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: BGVideoProps) {   
  return (
        <BackgroundVideoContainer>...some other stuff...   ) 
});

Here, bgColor is a optional prop

user_160990580
Related