import axios from "axios";
import {useState} from "react";

export function UpdateData(props){
    let [name,setName]=useState(props.usersData.name);
    let [age,setAge]=useState(props.usersData.age);
    let [city,setCity]=useState(props.usersData.city);
    
    let updateSubmit=(e)=>{
        e.preventDefault();
        let url=`http://localhost:8000/update/${props.usersData._id}`;
        axios.put(url,{"name":name,"age":age,"city":city})
        .then((res)=>{
            console.log(res);
            document.getElementById("updateForm").innerHTML=`<div ><h2>Data updated successfully.</h2></div>`;
        })
        .catch((err)=>{
            console.log(err);
            document.getElementById("updateForm").innerHTML=`<div ><h2>Sorry some Error occer !! Error: ${err} !!</h2></div>`;
        });
    }
    return(
            <div>
                <div className="updateForm">
                    <form onSubmit={updateSubmit}>
                        <div className="form-group">
                            <label>Your ID:</label>
                            <input name="id" type="text" defaultValue={props.usersData._id} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="id" readOnly></input>
                        </div>
                        <div className="form-group">
                        <label>Enter your name:</label>
                            <input name="name" type="text" defaultValue={props.usersData.name} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="name"  
                            onChange={(e)=>setName(e.target.value)}></input>
                        </div>
                        <div className="form-group">
                        <label>Enter your age:</label>
                            <input name="age" type="text" defaultValue={props.usersData.age} placeholder="Enter your age here....." autoComplete="off" className="form-control" id="age" 
                            onChange={(e)=>setAge(e.target.value)}></input>
                        </div>
                        <div className="form-group">
                            <label>Enter your city:</label>
                            <input name="city" type="text" defaultValue={props.usersData.city} placeholder="Enter your city here....." autoComplete="off" className="form-control" id="city" 
                            onChange={(e)=>setCity(e.target.value)}></input>
                        </div><br/>
                        <div>
                            <button className="btn" id="myButton2">Save Update</button>
                        </div>
                    </form>
                </div>
            </div>
    )
}

When ever I'm clicking on "Save Update" button the should be submit, and this "updateSubmit" function should perform accordingly. But some how this "updateSubmit" function is not calling. And on the "onChange" function inside element also not performing. please help by giving some ideas. Thank you.

CodePudding user response：

Try

<button className="btn" id="myButton2" type="submit">Save Update</button>

CodePudding user response：

You should not change html with document.getElementById in react. Do something like this instead:

import axios from "axios";
import { useState } from "react";

export function App(props) {
  const [name, setName] = useState(props.usersData.name);
  const [age, setAge] = useState(props.usersData.age);
  const [city, setCity] = useState(props.usersData.city);
  const [success, setSucess] = useState(false);
  const [error, setError] = useState(false);

  let updateSubmit = (e) => {
    e.preventDefault();
    const url = `http://localhost:8000/update/${props.usersData._id}`;
    axios.put(url, { "name": name, "age": age, "city": city })
      .then((res) => {
        console.log(res);
        setSucess(true);
      })
      .catch((err) => {
        console.log(err);
        setError(true);
      });
  }
  return (
    <div>
      <div className="updateForm">
        {success && <div className="text-success"><h2>Data updated successfully.</h2></div>}
        {error && <div className="text-danger"><h2>Sorry some Error occer !! Error !!</h2></div>}
        {!success && !error &&
          <form onSubmit={updateSubmit}>
            <div className="form-group">
              <label>Your ID:</label>
              <input name="id" type="text" defaultValue={props.usersData._id} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="id" readOnly></input>
            </div>
            <div className="form-group">
              <label>Enter your name:</label>
              <input name="name" type="text" defaultValue={props.usersData.name} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="name"
                onChange={(e) => {
                  console.log(e.target.value);
                  setName(e.target.value)
                }}></input>
            </div>
            <div className="form-group">
              <label>Enter your age:</label>
              <input name="age" type="text" defaultValue={props.usersData.age} placeholder="Enter your age here....." autoComplete="off" className="form-control" id="age"
                onChange={(e) => setAge(e.target.value)}></input>
            </div>
            <div className="form-group">
              <label>Enter your city:</label>
              <input name="city" type="text" defaultValue={props.usersData.city} placeholder="Enter your city here....." autoComplete="off" className="form-control" id="city"
                onChange={(e) => setCity(e.target.value)}></input>
            </div><br />
            <div>
              <button className="btn" id="myButton2" type="submit">Save Update</button>
            </div>
          </form>
        }
      </div>
    </div>
  )
}

You should also make the button to the type submit.

<button className="btn" id="myButton2" type="submit">Save Update</button>