8 replies

Understanding Dynamic React components with cloneElement and React.Children

Hey guys, i am following a tutorial from Meta Front End course on coursera and trying to understand lab example they had on creating dynamic react components.
What code basically does is creating radio group component and radio option component that can accepts childrens and props.

Most of the code i understood, but what puzzles me right now is why we need to include repeating props of:

checked = {checked}

checked = {checked}

checked = {checked}

checked = {checked}

in in radio option component:

export const RadioOption = ({ value, checked, onChange, children }) => {
  return (
    <div className="RadioOption">
      <input
        id={value}
        type="radio"
        name={value}
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
        }}
        checked={checked}
      />
      <label htmlFor={value}>{children}</label>
    </div>
  );
};

export const RadioOption = ({ value, checked, onChange, children }) => {
  return (
    <div className="RadioOption">
      <input
        id={value}
        type="radio"
        name={value}
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
        }}
        checked={checked}
      />
      <label htmlFor={value}>{children}</label>
    </div>
  );
};

export const RadioOption = ({ value, checked, onChange, children }) => {
  return (
    <div className="RadioOption">
      <input
        id={value}
        type="radio"
        name={value}
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
        }}
        checked={checked}
      />
      <label htmlFor={value}>{children}</label>
    </div>
  );
};

export const RadioOption = ({ value, checked, onChange, children }) => {
  return (
    <div className="RadioOption">
      <input
        id={value}
        type="radio"
        name={value}
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
        }}
        checked={checked}
      />
      <label htmlFor={value}>{children}</label>
    </div>
  );
};

As far as i understood we already assign and modify whatever children is inside of RadioGroup element through adding additionals props like:

checked: child.props.value === selected

checked: child.props.value === selected

checked: child.props.value === selected

checked: child.props.value === selected

in RadioGroup component:

export const RadioGroup = ({ onChange, selected, children }) => {
  const RadioOptions = Children.map(children, (child, index) => {
    return cloneElement(child, {
      checked: child.props.value === selected,
      onChange,
      key: index,
    });
  });
  return <div className="RadioGroup">{RadioOptions}</div>;
};

export const RadioGroup = ({ onChange, selected, children }) => {
  const RadioOptions = Children.map(children, (child, index) => {
    return cloneElement(child, {
      checked: child.props.value === selected,
      onChange,
      key: index,
    });
  });
  return <div className="RadioGroup">{RadioOptions}</div>;
};

export const RadioGroup = ({ onChange, selected, children }) => {
  const RadioOptions = Children.map(children, (child, index) => {
    return cloneElement(child, {
      checked: child.props.value === selected,
      onChange,
      key: index,
    });
  });
  return <div className="RadioGroup">{RadioOptions}</div>;
};

export const RadioGroup = ({ onChange, selected, children }) => {
  const RadioOptions = Children.map(children, (child, index) => {
    return cloneElement(child, {
      checked: child.props.value === selected,
      onChange,
      key: index,
    });
  });
  return <div className="RadioGroup">{RadioOptions}</div>;
};

If i remove checked = {checked} , i am losing ability to choose only one option, but i don't understand why. RadioGroup should clone and map over each child component (being Radio Options) give it checked prop and assign value to it being either true or false depending if selected value is equal to its props.value.
I dont really understand the point of adding checked = {checked} and why it doesn't work without it.

Understanding Dynamic React components with cloneElement and React.Children

Similar Threads

Similar Threads

Similar Threads