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•2y 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•2y 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•2y ago

I think zod has a .required() or you can do type ButtonProps = Required<z.infer<typeof ButtonSchema>>

Nelmin•2y ago

this one works but the 2. doesnt work

REEEEE•2y 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•2y ago

this works thank you

Gaming

Programming

Components Props and Text