# Simple form management

You can manage your form with eventrix using hooks. Full example you can find [here](https://codesandbox.io/s/eventrix-form-manage-1begky?file=/src/components/ContactModal.js:0-2114)

### TextInput

TextInput use [useEventrixState](https://eventrix.gitbook.io/eventrix/hooks/useeventrixstate) hook to update form state in eventrix.

{% tabs %}
{% tab title="Javascript" %}

```jsx
import React, { useCallback } from "react";
import TextField from "@material-ui/core/TextField";
import { useEventrixState } from "eventrix";

const TextInput = ({ onChange, value = "", type, label, name }) => {
  const [inputValue = value, setInputValue] = useEventrixState(`form.${name}`);

  const onInputChange = useCallback(
    (e) => {
      const newValue = e.target.value;
      onChange(newValue);
      setInputValue(newValue);
    },
    [setInputValue, onChange]
  );

  return (
    <TextField
      margin="dense"
      id={name}
      label={label}
      type={type}
      fullWidth
      variant="outlined"
      onChange={onInputChange}
      value={inputValue}
    />
  );
};

export default TextInput;
```

{% endtab %}
{% endtabs %}

### Submit and clear form receivers

Handle events of submit and clear form using [EventsReceiver](https://eventrix.gitbook.io/eventrix/receivers/eventsreceiver).

{% tabs %}
{% tab title="Javascript" %}

```jsx
import { EventsReceiver } from "eventrix";
import axios from "axios";
import { CLEAR_CONTACT_FORM, SUBMIT_CONTACT_FORM } from "./events";

const submitContactsFormReceiver = new EventsReceiver(
  SUBMIT_CONTACT_FORM,
  (name, eventData, stateManager) => {
    const contactData = stateManager.getState("form");
    return axios.post("/contacts", contactData).then(({ data }) => {
      const contacts = stateManager.getState("contacts");
      stateManager.setState("contacts", [...contacts, data]);
      stateManager.setState("form", {});
    });
  }
);

const clearContactsFormReceiver = new EventsReceiver(
  CLEAR_CONTACT_FORM,
  (name, data, stateManager) => {
    stateManager.setState("form", {});
  }
);

export default [submitContactsFormReceiver, clearContactsFormReceiver];

```

{% endtab %}
{% endtabs %}

### Form

Emit events about submit and clear form using [useEmit](https://eventrix.gitbook.io/eventrix/hooks/useemit) hook.

{% tabs %}
{% tab title="Javascript" %}

```jsx
import React, { useCallback } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextInput from "./TextInput";
import { useEmit, useEvent } from "eventrix";
import {
  CLEAR_CONTACT_FORM,
  OPEN_CONTACT_FORM,
  SUBMIT_CONTACT_FORM
} from "../eventrix/events";

const ContactModal = () => {
  const [open, setOpen] = React.useState(false);
  const emit = useEmit();
  const handleClickOpen = useCallback(() => {
    setOpen(true);
  }, [setOpen]);

  useEvent(OPEN_CONTACT_FORM, handleClickOpen);

  const handleClose = useCallback(() => {
    setOpen(false);
    emit(CLEAR_CONTACT_FORM);
  }, [emit, setOpen]);

  const handleCancel = useCallback(() => {
    handleClose();
    emit(CLEAR_CONTACT_FORM);
  }, [emit, handleClose]);

  const handleSave = useCallback(() => {
    handleClose();
    emit(SUBMIT_CONTACT_FORM);
  }, [emit, handleClose]);

  return (
    <div>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Contact</DialogTitle>
        <DialogContent dividers>
          <TextInput
            onChange={console.log}
            type="text"
            label="Name"
            name="name"
          />
          <TextInput
            onChange={console.log}
            type="text"
            label="Surname"
            name="surname"
          />
          <TextInput
            onChange={console.log}
            type="text"
            label="Email"
            name="email"
          />
          <TextInput
            onChange={console.log}
            type={"text"}
            label="Phone"
            name="phone"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancel}>Cancel</Button>
          <Button onClick={handleSave} variant="contained">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default ContactModal;

```

{% endtab %}
{% endtabs %}