Updating textbox value on submit

Question

I thought I resolved my previous question but here I am again. I've got a page with a simple react component containing an input, button, and textbox.

When the page loads it pulls the value from a MongoDB collection. It passes that to the component and the component should take that prop and display it in the textbox. I am able to show the value on initial loading.

Here is the code from the parent that passes the value to the goal component:

Goal goal={dashboardinfo}

Where dashboard info is in this case

$20,000

The goal component receives the prop

import { React, useState, useEffect } from "react";

import Form from "react-bootstrap/Form";
import { Row, Col, Button } from "react-bootstrap";
import "./../css/Goal.css";

const Goal = (props) => {
  let [goal, setgoal] = useState("");

  const goalUpdate = (event) => {
    setgoal(event.target.value);
    console.log("after-set goal", goal);
  };

  useEffect(() => {
    setgoal(props.goal);
  }, [props.goal]);


  return (
    <Form onSubmit={goalUpdate}>
      <Row className="align-items-center flex">
        <Col sm={3} className="goal sm={3}">
          <Form.Control
            className="goal"
            id="inlineFormInputGoal"
            placeholder="Goal"
            required
            onChange={goalUpdate}
          />
          <Button type="submit" className="submit btn-3">
            Submit
          </Button>
        </Col>
        <Col>
          <h1 className="text-box">Goal: {goal}</h1>
        </Col>
      </Row>
    </Form>
  );
};
export default Goal;

The useEffect updates the textbox with the props as expected. When I type in the input box, the onChange updates the textbox. But when I hit the submit, the input box is cleared out and the textbox goes back to the original props value. I cannot get the new value to stick. What am I missing?

Answer 1

The page is reloading when the submit button is hit, so it is causing the original value from mongoDb to be displayed. In your goalUpdate function if you add an event.preventDefault() that should stop the submit button refreshing the page when it's clicked.

Answer 2

event.preventDefault() should go inside the function called during submit to prevent form from being submitted.

 const goalUpdate = (event) => {
    event.preventDefault() //add this...
    setgoal(event.target.value);
    console.log("after-set goal", goal);
  };

Answer 3

const Goal = (props) => {
  let [goal, setgoal] = useState("");
    let [updatedGoal, setUpdatedGoal] = useState("")

  const onGoalValueChange = (event) => {
    setgoal(event.target.value);
    console.log("after-set goal", goal);
  };

//to handle updating value to new
  const updateGoal = (event) => {
    event.preventDefault()
    setUpdatedGoal(goal)
  }

  useEffect(() => {
    setgoal(props.goal);
  }, [props.goal]);


  return (
    <Form onSubmit={updateGoal}>  value
      <Row className="align-items-center flex">
        <Col sm={3} className="goal sm={3}">
          <Form.Control
            className="goal"
            id="inlineFormInputGoal"
            placeholder="Goal"
            required
            onChange={onGoalValueChange} // to handle value change in textbox
          />
          <Button type="submit" className="submit btn-3">
            Submit
          </Button>
        </Col>
        <Col>
          <h1 className="text-box">Goal: {updatedGoal !== undefined || updateGoal !== "" ? updateGoal || newGoal}</h1> // usually this will be props but doing this just for visual purpose
        </Col>
      </Row>
    </Form>
  );
};
export default Goal;

Updating my answer to make things work - similar to what I said in my comment (handling changed value and onSubmit value)