Entering data on form submits react js

Question

I created a sijmple which haves 4 inputs when i input in name it doesn't do anything which is fine. But when i enter in other forms, it automatically refreshes the pages and a blank page appear

    const [name, setName] = useState("");
    const [price, setPrice] = useState("");
    const [description, setDescription] = useState("");

  
    
  
    const submitHandler = (e) => {
      e.preventDefault();
    };
  
    return (
      <>
      
         
          <form
            className="Login col-md-8 col-lg-4 col-11"
            onSubmit={submitHandler}
          >
            <input
              type="text"
              placeholder="Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <input
              type="text"
              placeholder="Price"
              value={price}
              onChange={(e) => setPrice(e.target.value)}
            />
             <input
              type="text"
              placeholder="Description"
              value={description}
              onChange={(e) => setPrice(e.target.value)}
            />
            <input
              type="file"
              placeholder="Price"
              value={price}
              onChange={(e) => setPrice(e.target.value)}
            />


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

I tried searching for the solution which I implemented but it is not still working.

Answer 1

Since, I used file as Input type and gave value a price which was the main problem. I made a new useState sole purpose to store the image and it worked !.