onChange Input field is not change in react js edit update operation

Question

onChange Input field is not change in react js edit update operation. all value fetch using API php. but if click in input field and enter some word not editable so give any solution. may be this issue using map function. if it is possible without map function.

Full Code share plz scroll down the page

enter image description here

---

all code show onChange Input field is not change in react js edit update operation

 import React,{useState, useEffect} from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';
 
//import './App.css';
const EditUser=()=>{
//function Home() {
   // const navigate = useNavigate();
    const {id} = useParams();
        console.log(id);
       // console.log("jjjjjj");
       // alert(id);

    const[titlecourse,settitlecourse]=useState("");
    const[listshow,setlistshow]=useState("");

    console.log(titlecourse);


    
    const [userdata,setData]=useState ([]);
    useEffect(()=>{
        
        fetch(`https://www.example.com/jasonfile/wherecond.php?cid=${id}`).then((result)=>{
        result.json().then((resp)=>{
            // console.warn("result",resp)
             console.log(resp) 
             setData(resp.data);
             
           })
    })
    
    },[])

    
   console.log(userdata);
// show array

  


  return (
    <div className="container">
      <h1>Edit User {userdata.titlecourse}</h1>     
      <form >

      {
        userdata.map((item)=> 

<div>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">titlecourse </label>
    
    <div class="col-sm-10">
      <input type="text" class="form-control"
      name = "titlecourse"
      value={item.titlecourse}      
      //value={titlecourse}     
      //placeholder={item.titlecourse}
      onChange={(e)=>{settitlecourse(e.target.value)}}
     />
    </div>
    
  </div>
 
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">listshow</label>
    <div class="col-sm-10">
      <input type="text" class="form-control"
      name = "listshow"
      value={item.listshow}      
      onChange={(e)=>{setlistshow(e.target.value)}}
      />
    </div>
  </div>
  </div>

)
}
 
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

    </div>
  );
}

export default EditUser;

all code show onChange Input field is not change value in react js edit update operation

output show in image

enter image description here

Answer 1

In order to see a value change in the input fields, you need to set the value prop as the state variables.

<div class="col-sm-10">
    <input type="text" class="form-control"
    name = "titlecourse"      
    value={titlecourse}     
    onChange={(e)=>{settitlecourse(e.target.value)}}
   />
</div>