2 replies

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>

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>

Passing props in parent component

Similar Threads

Passing props in parent component

Similar Threads

Similar Threads

Similar Threads