кнопка для удаления каждого пользователя

Question

Хочу сделать кнопку для удаления каждом пользователю, но чего-то не удаляется, в чем проблема

App.js

import './App.css';
import Car from "./component/characterComponent/character.component";
import {useState} from "react";
const listUsers = [
  {id: 9, name: 'vasya', age: 31, isMarried: false, address: {city: 'Kyiv', street: 'Gongadze', number: 16}},
  {id: 2, name: 'petya', age: 30, isMarried: true, address: {city: 'Rivne', street: 'Zelena', number: 1}},
  {id: 4, name: 'kolya', age: 29, isMarried: true, address: {city: 'Lviv', street: 'Pasichna', number: 121}},
  {id: 3, name: 'olya', age: 28, isMarried: false, address: {city: 'Rivne', street: 'Shevchenko', number: 90}},
  {id: 8, name: 'max', age: 30, isMarried: true, address: {city: 'Lviv', street: 'Kriva Lipa', number: 115}},
  {id: 6, name: 'anya', age: 31, isMarried: false, address: {city: 'Lviv', street: 'Shevchenko', number: 2}},
  {id: 10, name: 'oleg', age: 28, isMarried: false, address: {city: 'Kyiv', street: 'Centralna', number: 22}},
  {id: 5, name: 'andrey', age: 29, isMarried: true, address: {city: 'Lviv', street: 'Gorodotska', number: 43}},
  {id: 1, name: 'masha', age: 30, isMarried: true, address: {city: 'Kyiv', street: 'Peremogi', number: 12}},
  {id: 7, name: 'olya', age: 31, isMarried: false, address: {city: 'Lviv', street: 'Naukova', number: 16}},
  {id: 11, name: 'max', age: 31, isMarried: true, address: {city: 'Rivne', street: 'Ivana Franka', number: 121}}
];
function App() {
  return (
    <div>
        {
           listUsers.map((value,index)=>
             <Car key={index}
                        {...value}
             />
           )
        }
    </div>
  );
}
export default App;

character.component

import {useState} from "react";


export default function User(props) {
    let {id, name, age, isMarried} = props;

    let [user,userSet]=useState(props)
    const deleteUser=()=>{
          user={}
        userSet(user)
    }
    return (
        <div>
            <h3>{id} {name} {age} {isMarried.toString()}
            </h3>
            <button onClick={deleteUser}>Delete user</button>
        </div>
    );
}

Answer 1

Нужно вынести стейт в родительский компонент и передавать в дочерний только функцию для удаления объекта по id.

// App.js

import { useState } from "react";
import "./App.css";
import Character from "./component/characterComponent/character.component";

const listUsers = [
  {
    id: 9,
    name: "vasya",
    age: 31,
    isMarried: false,
    address: { city: "Kyiv", street: "Gongadze", number: 16 }
  },
  {
    id: 2,
    name: "petya",
    age: 30,
    isMarried: true,
    address: { city: "Rivne", street: "Zelena", number: 1 }
  },
  {
    id: 4,
    name: "kolya",
    age: 29,
    isMarried: true,
    address: { city: "Lviv", street: "Pasichna", number: 121 }
  },
  {
    id: 3,
    name: "olya",
    age: 28,
    isMarried: false,
    address: { city: "Rivne", street: "Shevchenko", number: 90 }
  },
  {
    id: 8,
    name: "max",
    age: 30,
    isMarried: true,
    address: { city: "Lviv", street: "Kriva Lipa", number: 115 }
  },
  {
    id: 6,
    name: "anya",
    age: 31,
    isMarried: false,
    address: { city: "Lviv", street: "Shevchenko", number: 2 }
  },
  {
    id: 10,
    name: "oleg",
    age: 28,
    isMarried: false,
    address: { city: "Kyiv", street: "Centralna", number: 22 }
  },
  {
    id: 5,
    name: "andrey",
    age: 29,
    isMarried: true,
    address: { city: "Lviv", street: "Gorodotska", number: 43 }
  },
  {
    id: 1,
    name: "masha",
    age: 30,
    isMarried: true,
    address: { city: "Kyiv", street: "Peremogi", number: 12 }
  },
  {
    id: 7,
    name: "olya",
    age: 31,
    isMarried: false,
    address: { city: "Lviv", street: "Naukova", number: 16 }
  },
  {
    id: 11,
    name: "max",
    age: 31,
    isMarried: true,
    address: { city: "Rivne", street: "Ivana Franka", number: 121 }
  }
];

function App() {
  const [users, setUsers] = useState(listUsers);

  const deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };
  return (
    <div>
      {users.map((value, index) => (
        <Character key={index} {...value} onDelete={deleteUser} />
      ))}
    </div>
  );
}
export default App;

// character.component

export default function Character(props) {
    const {id, name, age, isMarried, onDelete} = props;

    return (
        <div>
            <h3>{id} {name} {age} {isMarried.toString()}
            </h3>
            <button onClick={() => onDelete(id)}>Delete user</button>
        </div>
    );
}

БЛОГ НА HUSL

кнопка для удаления каждого пользователя

Ответы (1 шт):