Prefill React Form with values

Question

I would like to create edit Form in react for Post, so my workflow is this fetch post, setState of the form, and show it... Im trying to make this in functional component since its easy for me to use graphql there

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import useForm from 'react-hook-form';

const GET_POST = gql`
query getPost($id: String!) {
    getPost(id: $id) {
      id
      title
      content
      excerpt
      author {
          name
      }
    }
  }
`;

const EditPost = (props) => {
     //  here Im using postId to fetch post
    const PostID = props.history.location.state.id;
      // Im using react-hook-form
    const { register, errors, reset, handleSubmit } = useForm();
    let POST = { title: '', author: '', content: '', image: '', excerpt: '' };
    //set initial state of form
    const [values, setValues] = useState({
        title: POST.title, author: POST.author, content: POST.content, image: POST.image, excerpt: POST.excerpt
    });


    const { data, loading, error } = useQuery(GET_POST, {
        variables: { id: PostID },
    });

    if (loading) return <p>LOADING</p>;
    if (error) return <p>ERROR</p>;

    const fetchedPost = data.getPost;
    // here is a problem I would like when post is fetched to set those values to state & then use it to make form reactive ???
   if (fetchedPost) {
        const { title, author, content, image, excerpt } = fetchedPost;

    }

    return (
        <div className="edit-form">
            <h2>Edit Post</h2>
            <fieldset>
                <form>
                    <p className="form-group">
                        <label htmlFor="title">Post Title: </label>
                        <input type="text" name="title" id="name"
                            value={values.title}
                            aria-invalid={errors.title ? 'true' : 'false'}
                            aria-describedby="error-title-required error-title-maxLength"
                            ref={register({ required: true, maxlength: 20 })}
                            placeholder="Name" />
                        <span>{errors.title && 'Title is required'} </span>
                    </p>

                </form>
            </fieldset>

        </div>);
}


export default EditPost;

The problem is when I fetch the Post I do not know how to set state for the form & how to make the form reactive ???

Answer 1

see documentation: https://github.com/react-hook-form/react-hook-form/blob/fa5e71ca5eef76ae29b9cda774061051e5182162/examples/customValidation.tsx

  const intialValues = {
    firstName: 'bill',
    lastName: 'luo',
    email: '[email protected]',
    age: -1,
  };

      <input
        defaultValue={intialValues.firstName}
        name="firstName"
        placeholder="bill"
        ref={register({
          validate: value => value !== 'bill',
        })}
      />