Components Props and Text

Hey mates! I need to know 2 things
1. How can I add required props? 2. How can I add text to a Component like in the Example?
example:
//Component
export default function Button(props: ButtonProps) {
return (
<>
<button class={getStyle(props.type)}></button>
</>
);
}

//Site
<Button>Test</Button>
//Component
export default function Button(props: ButtonProps) {
return (
<>
<button class={getStyle(props.type)}></button>
</>
);
}

//Site
<Button>Test</Button>
6 Replies
REEEEE
REEEEE2y ago
1. Depends on how your ButtonProps is defined 2. You can use props.children which can be defined in your ButtonProps via
interface ButtonProps{
...other stuff goes here
children: JSXElement <----- This is from the solidjs package
}
interface ButtonProps{
...other stuff goes here
children: JSXElement <----- This is from the solidjs package
}
Nelmin
NelminOP2y ago
import {z} from "zod";

const ButtonSchema = z.object({
text: z.string(),
type: z.enum(["primary", "success", "danger"]),
});

type ButtonProps = z.infer<typeof ButtonSchema>;
import {z} from "zod";

const ButtonSchema = z.object({
text: z.string(),
type: z.enum(["primary", "success", "danger"]),
});

type ButtonProps = z.infer<typeof ButtonSchema>;
REEEEE
REEEEE2y ago
I think zod has a .required() or you can do type ButtonProps = Required<z.infer<typeof ButtonSchema>>
Nelmin
NelminOP2y ago
this one works but the 2. doesnt work
REEEEE
REEEEE2y ago
yeah I think it's cause zod is being used You should be able to do this
type ButtonProps = Required<z.infer<typeof ButtonSchema>> & {children: JSXElement};
type ButtonProps = Required<z.infer<typeof ButtonSchema>> & {children: JSXElement};
Nelmin
NelminOP2y ago
this works thank you
Want results from more Discord servers?
Add your server