I would like to create a custom action bar with flexible actions that can be set via props or similar.
This is how I implemented it (and it's working like expected), but I'm wondering if there's a better or cleaner way in React (with TypeScript).
Especially when the actions increase over time. Then I would have to add more booleans that would eventually make things confusing.
type CustomBarProps = {
withButton: boolean,
withCheckbox: boolean,
withRadio: boolean,
}
export const CustomBar = ({
withButton = false,
withCheckbox = false,
withRadio = false,
}: CustomBarProps) => {
const features: JSX.Element[] = [
withButton && <Button />,
withCheckbox && <Checkbox />,
withRadio && <Radio />,
]
return <Bar features={features} />
}
yeah you don't need to explicitly define each prop has to be false you can also do it like this
type CustomBarProps = {
Button?: boolean;
Checkbox?: boolean;
Radio?: boolean;
};
export const CustomBar: React.FC<CustomBarProps> = ({ Button, Checkbox, Radio }) => {
const features = [Button && <Button />, Checkbox && <Checkbox />, Radio && <Radio />];
return <Bar features={features} />;
};