Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'

Question

I am using the Fluent UI, imported the Toggle component and got a UI Toggle exported:

export const UIToggle: React.FunctionComponent = () => {
  return (
    <Stack tokens={stackTokens}>
      <Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" />
    </Stack>
  );
};

but when I want to use it and update the 'label' attribute:

<UIToggle label = "Turn on"></UIToggle>

here is the error:

Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'label' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

Can anyone explain why this error appears and how can I solve it?

Answer 1

I need to provide label as an argument to the interface. With the following revision, it is working well now

import * as React from 'react';
import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
import { Toggle } from '@fluentui/react/lib/Toggle';

const stackTokens: IStackTokens = { childrenGap: 10 };

interface ILabels {
  label: string
}
export const UIToggle: React.FunctionComponent<ILabels> = (props) => {
  return (
    <Stack tokens={stackTokens}>
      <Toggle label={props.label} defaultChecked onText="On" offText="Off" />
    </Stack>
  );
};