score:1

as much as i understand ur question, you can do something like this https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/clickinput.js


  • you can have a items and setitems state and functions in the parent component.
  • you can do to save the value of a function is

function changeitem(i, value) { //index to be updated and value
  let newitems = [...items];
  newitems[i] = value;
  setitems(newitems);
}

  • there will a component to map over and render the list

function list({ items, setitem }) {
  return (
    <>
      {items?.map((itm, i) => (
        <label
          key={i}
          title={itm}
          onchange={(e) => setitem(i, e.target.value)} //pass the index and value of the edited index to be saved
        />
      ))}
    </>
  );
}

  • for each label, you can create a component having an edit state, which is triggered when clicked.

function label({ title, onchange }) {
  const [edit, setedit] = usestate(false);

  return (
    <div>
      {!edit ? (
        <span onclick={() => setedit(true)}>{title}</span> //onclick to start edit
      ) : (
        <>
          <input autofocus value={title} onchange={onchange} /> //input to edit
          <button onclick={() => setedit(false)}>save</button> //this is to toggle edit
        </>
      )}
    </div>
  );
}

Related Query

More Query from same tag