[FIXED] How to disable a button until all the fields are filled in a textfield

Issue

I have a table in a modal whose code looks like this.

  <div>
        <Table>
              <tbody>
                {props.data.map((p) => <>
                  <tr>
                    <th> STC </th>
                    <th> Edit Text</th>
                  </tr>
                  <tr index={p}>
                  <td key={p.stc}><h3>{p.stc}</h3></td>
                  <td >
                    <TextField name={p.stc} type="text"  value={p.readValue}  onChange={handleChange} required={true} size="small" label="Required" variant="outlined" />
                  </td>
                  </tr>
                </>)}
                </tbody>
        </Table>
        <div >
          <Button disabled={inputState.disable} className="buttonStyle" onClick={(e) => submit()}>SUBMIT</Button>
          <Button onClick={handleClose}>CANCEL</Button>
          </div>
      </div>

And their corresponding functions and declarations as below -

  const [formInput, setFormInput] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
  );
  const [inputState, setInputState] = useState({disable: true});
  const handleOpen = (e) => {
    setOpen(true);
  };

  const handleClose = () => {
    window.location.reload(false);
    setOpen(false);
  };
  const [readValue, writeValue] = useState("");

  const submit = (e) => {
    console.log("Submitted!")
    handleClose();
  }

  const handleChange = (event) => {
    const newValue = event.target.value;
    writeValue(event.target.value)
    setInputState({disable: event.target.value===''}) 
  }

I want to -

1. disable the buttons until and unless all the TextFields are filled.
2. In handleClose(), is there any alternate solution for clearing the values of TextFields in stead of window.reload?

The format looks like the picture I'm attaching below- enter image description here

Solution

import React, { useState } from "react";
import "./style.css";

export default function App() {
  const textFields = ["field1", "field2"];
  const [inputValue, setInputValue] = useState({});
  const [buttonDisabled, setButtonDisabled] = useState(true);

  const validateButton = accInputs => {
    let disabled = false;
    textFields.forEach(field => {
      if (!accInputs[field]) {
        disabled = true;
      }
    });
    return disabled;
  };
  const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    const inputObj = {};
    inputObj[name] = value;
    const accInputs = { ...inputValue, ...inputObj };
    setInputValue(accInputs);
    setButtonDisabled(validateButton(accInputs));
  };

  const handleSubmit = () => {
    console.log("submit clicked");
  };

  const handleCancel = () => {
    const inputObj = {};
    textFields.forEach(field => {
      inputObj[field] = "";
    });
    setInputValue(inputObj);
  };
  return (
    <div>
      <table border="1px">
        <tr>
          <th> STC </th>
          <th> Edit Text</th>
        </tr>
        {textFields.map(field => {
          console.log("rendered");
          return (
            <tr>
              <td>
                <h3>p.stc</h3>
              </td>
              <td>
                <input
                  placeholder="required *"
                  value={inputValue[field]}
                  name={field}
                  onChange={handleChange}
                />
              </td>
            </tr>
          );
        })}
      </table>
      <input type="submit" disabled={buttonDisabled} onClick={handleSubmit} />
      <input type="submit" onClick={handleCancel} value="cancel" />
    </div>
  );
}

can be easily achieved with the above code. Please refer working example here

updated to add second point aswell.

Answered By - anees rehman

Answer Checked By - Willingham (PHPFixing Volunteer)