index.js
30 lines
| 1 | import {toKebabCase} from '../../utils'; |
| 2 | import './style.scss'; |
| 3 | |
| 4 | const RadioControl = ({label, description, options, value, onChange}) => { |
| 5 | const optionEls = options.map((option, index) => { |
| 6 | const id = toKebabCase(option.value); |
| 7 | return ( |
| 8 | <div className="give-donor-dashboard-radio-control__option" key={index}> |
| 9 | <input |
| 10 | type="radio" |
| 11 | name="format" |
| 12 | id={id} |
| 13 | value={option.value} |
| 14 | checked={option.value === value ? true : false} |
| 15 | onChange={(evt) => onChange(evt.target.value)} |
| 16 | /> |
| 17 | <label htmlFor={id}>{option.label}</label> |
| 18 | </div> |
| 19 | ); |
| 20 | }); |
| 21 | return ( |
| 22 | <fieldset className="give-donor-dashboard-radio-control"> |
| 23 | {label && <legend className="give-donor-dashboard-radio-control__legend">{label}</legend>} |
| 24 | {description && <div className="give-donor-dashboard-radio-control__description">{description}</div>} |
| 25 | {optionEls} |
| 26 | </fieldset> |
| 27 | ); |
| 28 | }; |
| 29 | export default RadioControl; |
| 30 |