React TSX - Use Lambda expression in React element prop-CodePudding

I have a SplitButton and want to use a Lambda expression in the label like so:

<SplitButton
  options={[
    {
      label: (  
            {hasValues && isSelected.length === 0 ? (
             <FormattedMessage defaultMessage = "Text A"/>
                ) : (
             <FormattedMessage defaultMessage = "Text B"/>
                )}      
      ),
      value: "myValue",
    }, ]}
/>

However that's giving me an error saying "Property value is missing in type {label: JSX.Element} but required in type {label: ReactNode; value: string}."

Is there a way to make the Lambda expression work as a Prop in a React element?

CodePudding user response：

No need to do label: ({...}), {} are messing up the code here.

Use this instead:

<SplitButton
  options={[
    {
      label:
        hasValues && isSelected.length === 0 ? (
          <FormattedMessage defaultMessage="Text A" />
        ) : (
          <FormattedMessage defaultMessage="Text B" />
        ),
      value: "myValue",
    },
  ]}
/>

CodePudding user response：

I guess you just need to difine a interface {label: ReactNode; value: string}, and then you it, just see https://www.typescriptlang.org/docs/handbook/2/objects.html