midiAppComponent.js

import React from 'react';
import { MidiNote, MidiDevice } from 'hypothetical-react-midi';
import partial from 'lodash.partial';

export default function App({ input, output, noteStates, dispatch }) {
  
  function onMessage(note, { command, velocity }) {
    dispatch({
      type: 'MESSAGE_RECIEVED',
      payload: { command, velocity, note }
    });
  }
  
  const notes = noteStates.map(({ note, velocity, command }) => (
    <MidiNote key={note}
      note={note}
      channel={channel}
      velocity={velocity}
      command={command}
      onMessage={patial(onMessage, note)}>
    </MidiNote>
  ));
  
  return (
    <MidiDevice input={input} output={output}>
      {notes}
    </MidiDevice>
  )
}