Kevin Powell - Community•12mo ago

Passing props in parent component

React I have two types of components: - List - option (component CheckboxOption or RadioOption could be used in props.children)

type Props = {
  optionId: number | string;
  optionName: string
}

export const CheckboxOption = (props: Props) => {
return <li>{props.optionId} - {props.optionName}</li>
}

type Props = {
  optionId: number | string;
  optionName: string
}

export const CheckboxOption = (props: Props) => {
return <li>{props.optionId} - {props.optionName}</li>
}

interface Props2 {
  id: number | string;
  name: string
  children: ReactElement;
}
export List = (props: Props2) => {
return <ul>
  {React.cloneElement(props.children, {optionId: props.id, optionName: props.name})}
</ul>
}

interface Props2 {
  id: number | string;
  name: string
  children: ReactElement;
}
export List = (props: Props2) => {
return <ul>
  {React.cloneElement(props.children, {optionId: props.id, optionName: props.name})}
</ul>
}

Now I want to use it in the app, how can I do it without repeating props? (Example is simplified, and in real scenario CheckboxOption could be also replaced with RadioOption etc... page.tsx

<Select id="10" name="potato">
  <CheckboxOption/>
  // <CheckboxOption/>
  // <RadioOption/>
</Select>

<Select id="10" name="potato">
  <CheckboxOption/>
  // <CheckboxOption/>
  // <RadioOption/>
</Select>

2 Replies

missymae•12mo ago

You can have optional props, you can have default values, or you can not pass a prop and it will be undefined.

Kuba FarawayOP•12mo ago

If I set props to optional, in the option components I will have to handle many really unnecessary checks to control flow of code. Idea with default values (kinda dummy values) can be worth trying, I will test it and report back later.

Gaming

Programming

Passing props in parent component