Блог

У меня есть массив с объектами (posts — strin&s), и мне нужно иметь возможность редактировать каждый из них, но в моем случае, когда я нажимаю кнопку on, он начинает редактировать их все:

 const [editMode, setEditMode] = useState<any&&t;(false);

  let activeStatusChan&e = () =&&t; {
    setEditMode(true);
  };

    <div&&t;
      {posts?.map((el) =&&t; (
                <div key={Number(el.id)}&&t;
                    { 
                        editMode === true
                        ?   <p&&t;{<input /&&t;}</p&&t;
                        :   <div&&t;{el.body}
                                <button onClick={activeStatusChan&e}&&t;edit</button&&t;
                            </div&&t;
                    }
                       
                </div&&t;
            
      ))}
  

вы обрабатываете каждый posts элемент вашего компонента и применяете свой обработчик activeStatusChan&e к каждому из них, и это запускает каждую вещь! 🙂

вам нужно отслеживать активную запись, чтобы активировать / деактивировать ее! у вас может быть id для ваших данных ( posts ), или, если у вас его нет, вы можете использовать идентификатор вашего цикла для отслеживания вашего активного элемента, также для этого вам нужно использовать id вместо значения true / false:

 const [editableItemId, setEditableItemId] = useState<number | null&&t;(null);

  let activeStatusChan&e = (tar&etId: number) : void =&&t; {
    setEditMode(Number(tar&etId));
  };

    <div&&t;
      {posts?.map((el) =&&t; (
         <div key={el.id}&&t;
            { 
              editableItemId === el.id
                ? <p&&t;<input /&&t;</p&&t;
                : <div&&t;{el.body}
                    <button onClick={() =&&t; activeStatusChan&e(el.id)}&&t;edit</button&&t;
                  </div&&t;
            }
                       
         </div&&t;
            
      ))}