Как отобразить нужную позицию в зависимости от выбора опции селекта?

Question

[Сергей]

Здравствуйте!

Помогите решить задачу.
Необходимо при выборе опции в селекте отображать нужный прайс. Прайс и период находятся в одном объекте.

Вот код:

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>
        );
      })}

Answer 1

[0xD34F]

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>
);