KPC
Kevin Powell - Community•14mo ago
Kuba Faraway

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
missymae•14mo ago
You can have optional props, you can have default values, or you can not pass a prop and it will be undefined.
Kuba Faraway
Kuba FarawayOP•14mo 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.

Did you find this page helpful?