import './App.css';
import { useState, } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  return [
    { value,
      onChange: e => setValue(e.target.value) },
    () => setValue(initialValue)
  ];
}
function App() {
  const [titleProps, setTitle] = useInput("");
  const [colorProps, setColor] = useInput("#112596");

  const submit = (e) => {
    e.preventDefault();
    alert(`${titleProps.value}, ${colorProps.value}`);
    setColor('#256987"');
    setTitle('');
  }

  return (
    <div className="App">
      <form onSubmit={submit}>
        <input
          {...titleProps}
          type="text"
          placeholder='color title'
        />
        <input
          {...colorProps}
          type='color'
        />
        <button>Add</button>
      </form>
    </div>
  );
}

export default App;