[React] 배열에서 항목 수정하기

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.배열에 항목 수정 하기

배열에서 특정 항목을 찾아 수정하고, 새로운 배열을 상태로 설정한뒤 useState를 사용하여 상태를 업데이트하는 것입니다.

 

 

 

handleEdit 함수는 주어진 id를 가진 항목을 찾아 newName으로 업데이트합니다.
names.map((name) => name.id === id ? { ...name, name: newName } : name): id가 일치하는 항목을 찾아 이름을 newName으로 변경하고, 그렇지 않은 항목은 그대로 유지하는 새로운 배열을 생성합니다.

const handleEdit = (id, newName) => {
  setNames(
    names.map((name) =>
      name.id === id ? { ...name, name: newName } : name
    )
  );
};

<button onClick={() => handleEdit(person.id, prompt('New name:', person.name))}>
Edit
</button>

 

 

 

import React, { useState } from 'react';

function NameList() {
  // 상태로 names 배열과 input 상태를 정의
  const [names, setNames] = useState([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]);
  const [input, setInput] = useState('');

  // 입력 필드의 값을 변경하는 함수
  const handleChange = (e) => {
    setInput(e.target.value);
  };

  // 새로운 이름을 names 배열에 추가하는 함수
  const handleAdd = () => {
    if (input.trim() === '') return; // 빈 입력 무시
    const newName = { id: names.length + 1, name: input }; // 새로운 이름 객체 생성
    setNames([...names, newName]); // 새로운 이름 객체를 배열에 추가
    setInput(''); // 입력 필드를 초기화
  };

  // 특정 항목을 제거하는 함수
  const handleRemove = (id) => {
    setNames(names.filter((name) => name.id !== id)); // id가 일치하지 않는 항목들로 새로운 배열 생성
  };

  // 항목을 수정하는 함수
  const handleEdit = (id, newName) => {
    setNames(
      names.map((name) =>
        name.id === id ? { ...name, name: newName } : name
      )
    );
  };


  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleChange}
        placeholder="Enter a name"
      />
      <button onClick={handleAdd}>Add Name</button>
      <ul>
        {names.map((person) => (
          <li key={person.id}>
            {person.name}
            <button onClick={() => handleEdit(person.id, prompt('New name:', person.name))}> Edit</button>
            <button onClick={() => handleRemove(person.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default NameList;