I'm trying to implement simple conditional rendering where if prefixText prop has more than 0 string then render double span elements else render single span element. But on prefixText.length I get error message saying ", is expected". Also on Text, I get "missing properties for ReactElement<any, any>" type error. How can I fix this issue? https://codesandbox.io/s/text-component-v2dbt?file=/src/App.tsx:0-538
import * as React from "react";
export interface TextProps {
children: string;
prefixText?: string;
}
export const Text: React.FunctionComponent<TextProps> = ({
children,
prefixText
}: TextProps) => {
return (
{ prefixText.length > 0 ?
<span>
<span style={{ fontWeight: "bold" }}>{prefixText} </span>
<span>{children}</span>
</span> :
<span>{children}</span>
}
);
};
export default function App() {
return (
<div>
<Text prefixText="Tips:">favourite vacation</Text>
</div>
);
}
You have to wrap your return statement into React.Fragment.
It should look like this
return (
<>
{ prefixText.length > 0 ? (
<span>
<span style={{ fontWeight: "bold" }}>{prefixText} </span>
<span>{children}</span>
</span>
) : (
<span>{children}</span>
)
</>
}
);
Or you can also get rid of return braces and create a construction like this:
return prefixText.length > 0 ? (
<span>
<span style={{ fontWeight: "bold" }}>{prefixText} </span>
<span>{children}</span>
</span>
) : (
<span>{children}</span>
)
Update your return block code to as follows:
return (
prefixText ?
<span>
<span style={{ fontWeight: "bold" }}>{prefixText}</span>
<span>{children}</span>
</span> :
<span>{children}</span>
);
Or update your component to the following:
export const Text: React.FunctionComponent<TextProps> = ({
children,
prefixText
}: TextProps) => (
prefixText ?
<span>
<span style={{ fontWeight: "bold" }}>{prefixText} </span>
<span>{children}</span>
</span> :
<span>{children}</span>
);
wrap your component with react.fragment and also check if prefixText exist in your condition
because prefixText is a partial in your typescript interface
return (
<React.Fragment>
{ prefixText && prefixText.length > 0 ?
<span>
<span style={{ fontWeight: "bold" }}>{prefixText} </span>
<span>{children}</span>
</span> :
<span>{children}</span>
}
</React.Fragment>
);