All other input data get clear when I i hit handleSubmit

Hi i am working on a React application where there are four options.when a user select an option corresponding input element will be added to the wrapper.In the following code add operation works fine but remove operation is not working properly ,it is not removing the corresponding element.Another problem the values on the inputs fields not present when the component re-renders.so experts guide me how i can acheive removing the corresponding row when the remove button is clicked and the input values should not be reset when the component re-renders.

But when I submit the input it will appear my data perfectly and when i restart the page and just click into edit and hit submit with the defaultValue it just clear all the data and send back to my backend with undefined value like this: [ undefined, undefined, undefined, undefined ]

Here is my full component:

const Agreement = (props) => {    const { agreement, editable, teamData, teamId, fetchTeamData } = props;    const [editing, setEditing] = useState(false);    const [title, setTitle] = useState("");    const [description, setDescription] = useState("");    const [showErrors, setShowErrors] = useState(false);    const [errorsArr, setErrorsArr] = useState();      const initialFormState = {      rule_0: teamData.rules.rule_0,      rule_1: teamData.rules.rule_1,      rule_2: teamData.rules.rule_2,      rule_3: teamData.rules.rule_3,      creator: teamData.User.public_user_id,    };      const [updateTeamData, setUpdateTeamData] = useState(initialFormState);      const [inputs, setInputs] = useState(teamData.rules);      const handleChange = (event) => {      const { name, value } = event.target;      // Update state      setUpdateTeamData((prevState) => ({        ...prevState,        [name]: value,      }));    };      // Add more input    const addInputs = () => {      setInputs([...inputs, { name: `rule_${inputs.length + 1}` }]);    };      // handle click event of the Remove button    const removeInputs = (index) => {      const list = [...inputs];      list.splice(index, 1);      setInputs(list);    };      const clearInput = (dataName) => {      setUpdateTeamData((prevState) => {        delete prevState[dataName];        return {          ...prevState,        };      });    };      const handleSubmit = async (event) => {      event.preventDefault();      setEditing(false);      // Send update request        const res = await axios.put(`/api/v1/teams/team/${teamId}`, updateTeamData);        // If no validation errors were found      // Validation errors don't throw errors, it returns an array to display.      if (res.data.validationErrors === undefined) {        // Clear any errors        setErrorsArr([]);        // Hide the errors component        setShowErrors(false);        // Call update profiles on parent        fetchTeamData();      } else {        // Set errors        setErrorsArr(res.data.validationErrors.errors);        // Show the errors component        setShowErrors(true);      }    };      const handleCancel = () => {      setEditing(false);    };      useEffect(() => {      if (agreement === "default") {        setTitle(defaultTitle);        setInputs(teamData.rules);      } else {        setTitle(agreement.title ?? "");      }    }, [agreement, teamData]);      console.log("teamData.rules", teamData.rules);    console.log("inputs", inputs);      return (      <div className="team-agreement-container">        {!editing && (          <>            <h4 className="team-agreement-rules-title">{title}</h4>            {editable && (              <div className="team-agreement-rules">                <EditOutlined                  className="team-agreement-rules-edit-icon"                  onClick={() => setEditing(true)}                />              </div>            )}            <p className="team-agreement-rules-description">{description}</p>            {teamData.rules.map((rule, index) => (              <div className="team-agreement-rule-item" key={`rule-${index}`}>                {rule ? (                  <div>                    <h4 className="team-agreement-rule-item-title">                      {`Rule #${index + 1}`}                    </h4>                    <p className="team-agreement-rule-item-description">                      - {rule}                    </p>                  </div>                ) : (                  ""                )}              </div>            ))}          </>        )}        {/* Edit rules form */}        {editing && (          <div className="team-agreement-form">            {showErrors && <ModalErrorHandler errorsArr={errorsArr} />}            <h1>Rules</h1>            {inputs.map((data, idx) => {              return (                <div className="agreement-form-grid" key={`${data}-${idx}`}>                  <button                    type="button"                    className="agreement-remove-button"                    onClick={() => {                      removeInputs(idx);                      clearInput(`rule_${idx}`);                    }}                  >                    <Remove />                  </button>                  <input                    name={`rule_${idx}`}                    onChange={handleChange}                    value={teamData.rules[idx]}                  />                </div>              );            })}            {inputs.length < 4 && (              <div className="team-agreement-add-rule">                <button type="submit" onClick={addInputs}>                  <Add />                </button>              </div>            )}            <div className="div-button">              <button className="save-button" onClick={handleSubmit}>                Save              </button>              <button className="cancel-button" onClick={handleCancel}>                Cancel              </button>            </div>          </div>        )}      </div>    );  };    export default Agreement;  

How can I fix this error?

My thought is the problem is around [inputs, setInputs]

https://stackoverflow.com/questions/67309912/all-other-input-data-get-clear-when-i-i-hit-handlesubmit April 29, 2021 at 09:32AM