Edit/Update input field with React

Question

I'm new to react and I'm trying to edit an input field after I prefilled its value with an object value from my database, so what should I put on onChange if value is value={data.info}? because I cannot type or change the initial value. I've watched a lot of tutorials but this. and props are very confusing to me

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import useAsync from '../useAsync';

export default function Details() {
  const url = 'https://..';
  const { index } = useParams();
  const { data } = useAsync(url + index);
  const [state, setState] = useState(false);



const showForm = () => {
    return (
        <div>
            <form>
                <input type="text" value={data.info} onChange={} />
            </form>
        </div>
    )
}


return (
    <div className="details" >
        {data && <p key={index}>{data.info}</p>}
        <button onClick={() => setState({ showForm: true })}>Edit</button>
        {state.showForm ? showForm() : null}
    </div>
)

}

Answer 1

You can add "default value" to your state. So you can move the data value to your useState(false) so useState(data)

import React, { useState } from "react";

const App = () => {
  const [formInput, setFormInput] = useState(""); // You can add your "data" as default value

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>formInput Value {formInput}</h2>
      <input
        type="text"
        value={formInput}
        onChange={(e) => setFormInput(e.target.value)} // You need to set the state with the onchange value from the input
      />
    </div>
  );
};

export default App;

Link to CodeSandbox