How to use formula-one - 6 common examples

const App = () => {
  const formData = useF1(initialForm);
  const [addFriend, removeFriend] = arrayUtils(formData.friends, '');

  console.log(formData);

  return (
    <form>
      
      
      
      

      <section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button>
          </div></section></form>

const App = () => {
  const formData = useF1(initialForm);
  const [addFriend, removeFriend] = arrayUtils(formData.friends, '');

  console.log(formData);

  return (
    <form>
      
      
      
      

      <section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button></div></section></form>

const F1ErrorBox = ({link}: Props) => {
  const {childErrors} = useLink(link);
  const errors = childErrors();

  return (
    <div>
      Form Errors:
      <ul>
        {errors.length ?
          errors.map(error =&gt; (
            <li style="{{color:">{error}</li>
          ))
          : <li>no errors!</li>
        }
      </ul>
    </div>
  );
};

const F1TextInput = ({link, validator, label}: Props) => {
  const {value, onChange, errors} = useLink(link, validator);

  return (
    <div>
      <h3>{label}</h3>
      
      <p style="{{color:">{errors.join(' ')}</p>
    </div>
  );
};

const F1SubmitButton = ({link, onClick, children}: Props) => {
  const {value} = useLink(link);

  const handleClick = () => {
    onClick && onClick(value);
  }

  return(
    <button type="submit">
      {children}
    </button>
  );
}

<section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button>
          </div>
        ))}
      </section>

      <button>Add Friend</button>

      Submit

      {JSON.stringify(peekValue(formData))}
    
  );
};