src/App.tsx

   1 import { createMemo, createState } from 'solid-js';
   2 import { For } from 'solid-js/dom';
   3 import { TaxReturn, Form } from 'ustaxlib';
   4
   5 import FormView from './FormView';
   6
   7 import './App.css';
   8
   9 interface AppProps {
  10   tr: TaxReturn;
  11 }
  12
  13 export default function App(props: AppProps) {
  14   const [ state, setState ] = createState({ form: props.tr.forms[0] });
  15
  16   const changeForm = e => {
  17     setState({ form: props.tr.forms[e.target.value] });
  18   };
  19
  20   const formIndexToName = createMemo(() => props.tr.forms.map((form, i) => [i, form.name]));
  21
  22   const formSelector = (
  23     <select onchange={changeForm}>
  24       <For each={formIndexToName()}>
  25         {tuple => (<option value={tuple[0]}>{tuple[1]}</option>)}
  26       </For>
  27     </select>
  28   );
  29
  30   return (
  31     <>
  32       <h1>Hello World</h1>
  33       {formSelector}
  34
  35       <FormView tr={props.tr} form={state.form as Form<any>} />
  36     </>
  37   );
  38 }