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

CodePudding user response：

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 >
    <label for="inputEmail3" >titlecourse </label>
    
    <div >
      <input type="text" 
      name = "titlecourse"
      value={item.titlecourse}      
      //value={titlecourse}     
      //placeholder={item.titlecourse}
      onChange={(e)=>{settitlecourse(e.target.value)}}
     />
    </div>
    
  </div>
 
  <div >
    <label for="inputPassword3" >listshow</label>
    <div >
      <input type="text" 
      name = "listshow"
      value={item.listshow}      
      onChange={(e)=>{setlistshow(e.target.value)}}
      />
    </div>
  </div>
  </div>

)
}
 
  <button type="submit" >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

CodePudding user response：

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

<div >
    <input type="text" 
    name = "titlecourse"      
    value={titlecourse}     
    onChange={(e)=>{settitlecourse(e.target.value)}}
   />
</div>