Conditioning a specific item from a mapped dynamic array in React JS-CodePudding

I want to have an edit mode to each field in a div that is mapped out from an array that I fetch from firbase. I succeeded doing that by conditioning the rendered field to the value of a boolean (editField) which I then manipulate using useState, like so:

in the functions seen up there I can manipulate the value of editTitle, so as to switch between the two functions by double clicking or clicking a button, and also update the field value in Firebase. as such:

this all works fine. HOWEVER, if there are more that one divs rendered from the tasks[], then thay are obviously all effected to the flipping of editTitle's value from false to true, and by double clicking one field, all fields of same name in all divs swithc to edit mode. as such:

what can I do to target only the field in the task I want to edit? I've tried using the elemnt.id and index in some way bat can't seem to come up with the correct method...

  const ifEditTitleIsTrue = (element, index) => {
    return (
      <div>
        <input
          type="text"
          defaultValue={element.Title}
          onChange={(e) => setUpdatedTitle(e.target.value)}
        />
        <button className="exit__editmode-btn btn" onClick={exitEditMode}>
          X
        </button>
        <button
          className="update__edit-btn btn"
          id="updateTitle"
          onClick={(e) => updateField(e, element.id)}
        >
          ok
        </button>
      </div>
    );
  };

  // if editTitle = false (default):

  const ifEditTitleIsFalse = (element, index) => {
    return (
      <h3
        id={index}
        className="task-title"
        onDoubleClick={() => setEditTitle(true)}
      >
        {element.Title}
      </h3>
    );
  };

  // edit mode for inCharge field
  const ifEditInChargeIsTrue = (element, index) => {
    return (
      <div>
        {
          <GetCollaboratorsForEditMode
            catchValueInCharge={catchValueInCharge}
          />
        }
        <button className="exit__editmode-btn btn" onClick={exitEditMode}>
          X
        </button>
        <button
          className="update__edit-btn btn"
          id="updateInCharge"
          onClick={(e) => updateField(e, element.id)}
        >
          ok
        </button>
      </div>
    );
  };

 {tasks[0] &&
        tasks.map((element, index) => (
          <div id={element.id} className="task" key={element.id}>
            {editTitle
              ? ifEditTitleIsTrue(element, index)
              : ifEditTitleIsFalse(element, index)}

CodePudding user response：

You need to keep track of what element is in edit mode. You can do it by storing the element id in your editTitle state, instead of just a boolean

  const ifEditTitleIsFalse = (element, index) => {
     ...   
     onDoubleClick={() => setEditTitle(element.id)}
     ...
  };

The condition to render an element in edit mode or view mode would change to:

{editTitle === element.id
   ? ifEditTitleIsTrue(element, index)
   : ifEditTitleIsFalse(element, index)}

CodePudding user response：

I've solved it!!!

insted of EditTitle being a boolean, it's just an empty string.

then the condition is editTitle === index ? some function : some othe function;

and the doubleclick is (()=> setEditTitle(index)).