App.tsx

App.tsx

import React, { useState, useEffect } from 'react';
import { GenericInput } from './TextEdit';

const App = () => {

  type myObj = {
    name: string;
    numLettersInName: number;
  }

  const [myNum, setNum] = useState(0);
  const [myStr, setStr] = useState("Hello");
  const [complexObj, setComplexObj] = useState<myObj>({ name: "Kate", numLettersInName: 4 });

  useEffect(() => {
    console.log(myNum);
    console.log(myStr);
    console.log(complexObj);
  },[myNum, myStr, complexObj]);

  return (
    <>
      <GenericInput onChange={n => setNum(n)} dataToString={num => num.toString()} dataFromString={parseInt} value={myNum} />
      <GenericInput onChange={s => setStr(s)} dataToString={s => s} dataFromString={s => s} value={myStr} />
      <GenericInput onChange={o => setComplexObj(o)} dataToString={obj => obj.name} dataFromString={s => ({ name: s, numLettersInName: s.length })} value={complexObj} />
    </>
  );
}

export default App;