import React, { useEffect, useState } from 'react'; import { SessionRadio } from './SessionRadio'; interface Props { // tslint:disable: react-unused-props-and-state initialItem: string; items: Array<any>; group: string; onClick: (selectedValue: string) => any; } export const SessionRadioGroup = (props: Props) => { const [activeItem, setActiveItem] = useState(''); const { items, group, initialItem } = props; useEffect(() => { setActiveItem(initialItem); }, []); return ( <div className="session-radio-group"> <fieldset id={group}> {items.map(item => { const itemIsActive = item.value === activeItem; return ( <SessionRadio key={item.value} label={item.label} active={itemIsActive} value={item.value} group={group} onClick={(value: string) => { setActiveItem(value); props.onClick(value); }} /> ); })} </fieldset> </div> ); };