How to properly organize this code?

Question

React

There is a structure

const [usersList, setUsersList] = useState([]);

App 
  <UsersList users={usersList} setUsersList={setUsersList} />

where App is the root component, userList is the component that renders the entered users, and accepts via prop - users and the array rerender method.

Have a function

const deleteUser = (id) => {
    props.setUsersList((prevState) =>
      prevState.filter((user) => user.id !== id)
    );
  };

Which accepts the user id, and removes the desired user from the state.

Question: where is it correct to write the deleteUser function? Now I have it in the usersList component, but I can also raise it in the App by simply passing the id to the top through the callback.

Are there architectural differences? And how "cleaner"?

Answer 1

For better readability and semantics, it's better to pass a function to<UsersList deleteUser={deleteUser} ... />