function App() {
const [state, setState] = useState([]);
return (
<>
{data.map(({ name, variants, id, code }) => {
return (
<div key={code + id} className="d-flex">
<div>{name}</div>
<select
onChange={(e) => {
setState((prev) => {
return [...prev, { id: e.target.value }];
});
}}
>
{variants.map(({ id, data }) => (
<option key={id} value={id}>
{data.period}
</option>
))}
</select>
{variants.map(({ price, id }) => (
<div
key={id}
style={{ color: state.id === id ? "yellow" : "red" }}
>
{price}
</div>
))}
</div>
);
})}
const [ selected, setSelected ] = useState({});
const onChange = ({ target: { value, dataset: { id } } }) => {
setSelected({ ...selected, [id]: value });
};
return (
<div>
{data.map(({ id, name, variants }) => (
<div>
<div>{name}</div>
<select
value={selected[id]}
data-id={id}
onChange={onChange}
>
<option>ну давай, выбери что-нибудь</option>
{variants.map(n => <option value={n.price}>{n.data.period}</option>)}
</select>
<div>{selected[id] || 'НИЧЕГО НЕ ВЫБРАНО'}</div>
</div>
))}
</div>
);