scrimba
Meta scrims
React Advanced
Lab Solution: Build a Radio Group Component
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Lab Solution: Build a Radio Group Component
AboutCommentsNotes
Lab Solution: Build a Radio Group Component
Expand for more info
src
Radio
index.js
run
preview
console
import * as React from "react";

export const RadioGroup = ({ onChange, selected, children }) => {
// Use React.Children.map and React.cloneElement to clone the children
// and pass the correct props to each RadioOption
const RadioOptions = null;

return <div className="RadioGroup">{RadioOptions}</div>;
};

export const RadioOption = ({ value, checked, onChange, children }) => {
// Hook up the onChange handler to call the onChange prop passed to RadioGroup
// Also, make sure to pass the correct checked and value props to the input element
return (
<div className="RadioOption">
<input id={value} type="radio" name={value} />
<label htmlFor={value}>{children}</label>
</div>
);
};

Console
/public/index.html
-6:03