How to build example update form in React Hooks?

react
1

I am a newbie for React (Hooks).
Could you example me to build sample update form (Get current data)?

  • Custom hook form (useForm)
import { useState } from 'react'

const useForm = initialValues => {
  const [values, setValues] = useState(initialValues)

  return [
    values,
    e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      })
    }
  ]
}

export default useForm
  • Update form (pass id props)
import { Meteor } from 'meteor/meteor'
import React, { useState } from 'react'

import useForm from '../hooks/useForm'

const TodoForm = ({ id }) => {
  // How to get current data by id??? and set to default form value???
  // Meteor.call('getData', id........)

  const [form, handleChange] = useForm({
    title: '',
    description: '',
  })

  const handleSubmit = e => {
    e.preventDefault()
    // Meteor.call ('updateTodo', form..........)
  }

  return (
    <div>
      <form className="form" onSubmit={handleSubmit}>
        <label className="form-label">
          Title
          <input
            type="text"
            name="title"
            value={form.title}
            onChange={handleChange}
          />
        </label>

        <label className="form-label">
          Description
          <textarea
            name="description"
            value={form.description}
            onChange={handleChange}
          />
        </label>

        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default TodoForm

Please help me :innocent:

2

First of all check the guide on info about React: https://guide.meteor.com/react.html#data
Specifically take a look on how to use hooks from the GitHub: https://github.com/meteor/react-packages/tree/devel/packages/react-meteor-data

The easiest approach would be to subscribe to the data in useTracker hook. In handle submit you can then call the Meteor method as you have it.

1 Like
3

Thanks for your reply, I will try :blush:

4

Could you share me the example CRUD on Meteor + React Hook?