I have a code using react-hook-forms. now I am removing them and using local state so while doing it I am getting errors. I have attached the reference code and code sandbox for reference.

The problem is the state is reflected in the input text box but it is not there in data when I do fetch requests. but when I simply copy-paste the same thing in the text box it is working

import Editor from "./components/Editor";
import Editortwo from "./components/Editortwo";
import "./styles.css";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { default as FormData } from "form-data";

export default function App() {
  const [solutestate, setSoluteState] = useState();
  const [solventstate, setSolventState] = useState();

  const [fetchData, setFetchData] = useState("");
  const [Error, setError] = useState(null);

  // states to keep track of check box
  console.log(solutestate);

  // const data1 = { solute: solutestate, solvent: solutestate };
  // console.log(data1);

  const formData = new FormData();
  const onSubmit = (data) => {
    formData.set("solute", data.solute);
    formData.set("solvent", data.solvent);
    console.log(data);

    fetch("https://flask-api-test1.herokuapp.com/predict", {
      method: "post",
      body: formData
    })
      .then((res) => res.json())
      .then((result) => {
        setFetchData(result.result.predictions);
      })
      .catch((err) => {
        setError(err.error);
        console.log(err);
      });
  };
  return (
    <div className="App">
      <Editor {...{ setSoluteState }} />
      <Editortwo {...{ setSolventState }} />
      <form noValidate onSubmit={onSubmit} className="space-x-4">
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          placeholder="SOLUTE"
          onChange={(e) => setSoluteState(e.target.value)}
          value={solutestate}
        />
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          placeholder="SOLVENT"
          onChange={(e) => setSoluteState(e.target.value)}
          value={solventstate}
        />
        <input
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit"
        />
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="text"
          readOnly
          value={fetchData}
          name="OUTPUT"
        />
      </form>
    </div>
  );
}

codesandbox link

CodePudding user response：

You've a few issues.

1. You are not preventing the default form action from occurring, so it's likely reloading the page.
2. You are not accessing the form data correctly, it should be retrieved from state, not the form's onSubmit event object.
3. You are using the setSoluteState state updater function on the solventstate state input.

Code:

const onSubmit = (e) => {
  e.preventDefault(); // <-- prevent the default form action
  
  const formData = new FormData();
  formData.set("solute", solutestate);   // <-- local component state
  formData.set("solvent", solventstate); // <-- local component state
  console.log({ solutestate, solventstate });

  fetch("https://flask-api-test1.herokuapp.com/predict", {
    method: "post",
    body: formData
  })
    .then((res) => res.json())
    .then((result) => {
      setFetchData(result.result.predictions);
    })
    .catch((err) => {
      setError(err.error);
      console.log(err);
    });
};

...

<form noValidate onSubmit={onSubmit} className="space-x-4">
  <input
    ...
    placeholder="SOLUTE"
    onChange={(e) => setSoluteState(e.target.value)}
    value={solutestate}
  />
  <input
    ...
    placeholder="SOLVENT"
    onChange={(e) => setSolventState(e.target.value)} // <-- use correct state updater
    value={solventstate}
  />
  ...
</form>