0

I have a Rescript react component which contains a form. I am trying to get the FormData when the form is submitted, but I am a bit confused about how to do that.

My component:

@react.component
let make = () => {
  let (todos, updateTodos) = Jotai.Atom.useAtom(State.todos)

  let addTodo = evt => {
    ReactEvent.Form.preventDefault(evt)
    let formElem = ReactEvent.Form.target(evt)

    Webapi.FormData.make()
    // Js.log(value)
  }

  <>
    <h1> {React.string("Welcome to the TODO App")} </h1>
    <form onSubmit={addTodo} style={ReactDOM.Style.make(~display="flex", ())}>
      <input type_="text" style={ReactDOM.Style.make(~display="block", ())} />
      <button style={ReactDOM.Style.make(~marginLeft="6px", ())}>
        {React.string("Add Todo")}
      </button>
    </form>
    <h2> {React.string("Todos:")} </h2>
    <div>
      {React.array(
        Belt.Array.map(todos, todo => {
          <li key={todo.id}>
            <span> {React.string(todo.text)} </span>
            <span> {React.string("X")} </span>
          </li>
        }),
      )}
    </div>
  </>
}

The library I am using to get the form data is: https://github.com/TheSpyder/rescript-webapi.

Looking through the library bindings here: https://github.com/TheSpyder/rescript-webapi/blob/main/src/Webapi/Webapi__FormData.res it says "to make from a HTML form, use Webapi.Dom.HtmlFormElement.data", but I'm unsure what that means and how to use it.

Redark
  • 173
  • 1
  • 11
  • it means `myForm->Webapi.Dom.HtmlFormElement.data` will return `FormData.t`. See [Webapi.Dom.HtmlFormElement.data](https://github.com/TheSpyder/rescript-webapi/blob/main/src/Webapi/Dom/Webapi__Dom__HtmlFormElement.res#L39). – Mulan May 15 '23 at 14:03
  • you might consider [controlled inputs](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) as a highly recommended alternative. You can see a working example in the [ReScript Playground](https://rescript-lang.org/try). – Mulan May 15 '23 at 14:04

0 Answers0