How to use reactronica - 4 common examples

effectId: selectedEffect.id,
              effectType: selectedEffect.type,
            });

            setSelectedEffect(null);
          }
        }}
      >
        <select value="{selectedEffect"> {
              return {
                label: effect.name,
                value: effect.id,
              };
            }),
          ]}
          onChange={(selectedOption) =&gt; {
            const id = selectedOption.value;
            const type = selectedOption.value;

            setSelectedEffect({ id, type });
          }}
        /&gt;
        {/* </select> {
            const selectedOption = event.target[event.target.selectedIndex];

//   setSelectedEffect(null);
  // }, [currentTrackId]);

  if (!currentTrack) {
    return null;
  }

  return (
    <div>
      <h2>Track</h2>
      <p>{currentTrack.id}</p>

      <h3>Instrument</h3>
      <select value="{currentTrack.instrumentType}"> {
          return {
            label: instrument.name,
            value: instrument.id,
          };
        })}
        onChange={(selectedOption) =&gt; {
          // const selectedOption = event.target[event.target.selectedIndex];
          // const type = selectedOption.getAttribute('data-type');

          dispatch({
            type: types.UPDATE_INSTRUMENT,
            instrumentType: selectedOption.value,
          });
        }}
      /&gt;
      {/* </select></div>

<div>
          <p>
            Instrument:{' '}
            <select> {
                const selectedOption = event.target[event.target.selectedIndex];
                const type = selectedOption.getAttribute('data-type');

                dispatch({
                  type: types.UPDATE_INSTRUMENT,
                  instrumentType: type,
                });
              }}
              value={currentTrack.instrumentType}
            &gt;
              {constants.instruments.map((instrument, i) =&gt; {
                const id = `${instrument.id}-${i}`;

                return (
                  <option value="{instrument.id}" data-type="{instrument.id}" data-id="{id}">
                    {instrument.name}
                  </option>
                );
              })}
            </select>
          </p>
          <div></div></div>

setSelectedEffect(null);
              }
            }}
          >
            <select> {
                const selectedOption = event.target[event.target.selectedIndex];
                const id = selectedOption.getAttribute('data-id');
                const type = selectedOption.getAttribute('data-type');

                setSelectedEffect({ id, type });
              }}
            &gt;
              <option>None</option>
              {constants.effects.map((effect, i) =&gt; {
                const id = `${effect.id}-${i}`;

                return (
                  <option id="==" selected="{selectedEffect" data-type="{effect.id}" data-id="{id}">
                    {effect.name}
                  </option>
                );
              })}
            </select>{' '}
            <button type="submit">Add Effect</button>