ReactJs form not displaying in browser even if the code runs with no erros-CodePudding

I wrote this code for a form to collect images and text data, it runs fine with no errors but in the browser, nothing is displayed but a blank screen.

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useDropzone } from 'react-dropzone';

const Form = () => {
  const { register, handleSubmit } = useForm();
  const [images, setImages] = useState([]);
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedImages => {
      setImages(acceptedImages.map(image => Object.assign(image, {
        preview: URL.createObjectURL(image)
      })));
    }
  });

  const onSubmit = async data => {
    const formData = new FormData();
    images.forEach(image => {
      formData.append('images', image);
    });
    formData.append('name', data.name);
    formData.append('description', data.description);

    try {
      const response = await fetch('http://localhost:8000/submit-form', {
        method: 'POST',
        body: formData
      });
      console.log(response);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <br />
      {images.map(image => (
        <img key={image.name} src={image.preview} alt={image.name} style={{ width: '200px' }} />
      ))}
      <br />
      <input name="name" ref={register} placeholder="Name" />
      <br />
      <textarea name="description" ref={register} placeholder="Description" />
      <br />
      <button type="submit">Submit</button>
    </form>
    
  );
}

export default Form

I expected to see a form in the browser and at least see if it actually works but i saw none. I'm using react Dropzone and react hook form on the form. And maybe a fetch for the data.

CodePudding user response：

Try to change the ref in input and textarea tag like so:

<input name="name" {...register('name')} placeholder="Name" />
<textarea name="description" {...register('description')} placeholder="Description" />

Reference: https://react-hook-form.com/get-started/

CodePudding user response：

I suspect you haven't called the e.preventDefault() to prevent the default form submission. So, you may try the following:

Replace the statement:

<form onSubmit={handleSubmit(onSubmit)}>

<form onSubmit={handleSubmit}>

change the handleSubmit function to:

const onSubmit = e => {
  e.preventDefault(); //prevent submit form
  let form = e.target; //get the form obj  
  const formData = new FormData();
images.forEach(image => {
  formData.append('images', image);
});   
    formData.append('name', form.name.value);
    formData.append('description', form.description.value);
   ..............................  
}