How to push element to the last place in the array

Question

So i have the data of patients in the database(mongodb) and in the frontend to see the whole list of patients i map through all the patients. I've added the the boolean type to patient if the patient is archived or not. If the patient is archived it is not possible to click on it and to see the data informations. How to make that if the patient is archived it will be displayed at the bottom of the list ? Should I use push function?

Here is the code:

const PatientListScreen = ({ history, match }) => {
  const dispatch = useDispatch();

  const patientList = useSelector((state) => state.patientList);
  const { loading, error, patients } = patientList;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const patientDelete = useSelector((state) => state.patientDelete);
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = patientDelete;

  const patientCreate = useSelector((state) => state.patientCreate);
  const {
    loading: loadingCreate,
    error: errorCreate,
    success: successCreate,
    patient: createdPatient,
  } = patientCreate;

  useEffect(() => {
    dispatch({ type: PATIENT_CREATE_RESET });

    if (!userInfo.isAdmin) {
      history.push("/login");
    }
    if (successCreate) {
      history.push(`/admin/patient/${createdPatient._id}/edit`);
    } else {
      dispatch(listPatients());
    }
  }, [
    dispatch,
    history,
    userInfo,
    successDelete,
    successCreate,
    createdPatient,
  ]);

  const deleteHandler = (id) => {
    if (window.confirm("Are you sure")) {
      dispatch(deletePatient(id));
    }
  };
  const createPatientHandler = () => {
    dispatch(createPatient());
  };

  return (
    <>
      <Row className="align-items-center">
        <Col>
          <h1>Patients List</h1>
        </Col>
        <Col className="text-right">
          <Button className="my-3" onClick={createPatientHandler}>
            <i className="fas fa-plus"></i> Create Patient
          </Button>
        </Col>
      </Row>
      {loadingDelete && <Loader />}
      {errorDelete && <Message variant="danger">{errorDelete}</Message>}
      {loadingCreate && <Loader />}
      {errorCreate && <Message variant="danger">{errorCreate}</Message>}
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <ListGroup>
          <ListGroupItem className="border-dark">
            {patients.map((patient) => (
              <Row key={patient._id} className="align-items-center">
                <Col>
                  <Card className="my-3 p-3 border-dark rounded patient-item">
                    <Link to={`/admin/patientlist/${patient._id}`}>
                      <Row>
                        <Col
                          md="auto"
                          as="h5"
                          className="text-center patient-item-Col"
                        >
                          Name: {patient.name}
                        </Col>
                        <Col as="h5" className="text-center patient-item-Col">
                          Age: {patient.age}
                        </Col>
                        <Col as="h5" className="text-center patient-item-Col">
                          Sex: {patient.sex}
                        </Col>
                        <Col
                          md="auto"
                          as="h5"
                          className="text-center patient-item-Col"
                        >
                          Birth: {patient.birth}
                        </Col>
                      </Row>
                    </Link>
                  </Card>
                </Col>
                <Col md="auto" className="text-right">
                  <LinkContainer to={`/admin/patient/${patient._id}/edit`}>
                    <Button id="button" variant="secondary" className="btn-sm">
                      <i className="fas fa-edit"></i>
                    </Button>
                  </LinkContainer>
                  <Button
                    variant="danger"
                    className="btn-sm"
                    onClick={() => deleteHandler(patient._id)}
                  >
                    <i className="fas fa-trash"></i>
                  </Button>
                </Col>
              </Row>
            ))}
          </ListGroupItem>
        </ListGroup>
      )}
    </>
  );
};

export default PatientListScreen;

Answer 1

this example use the reverse() function for sort element element from the bottom(last) to Top(first)

NameArray.reverse().map((text, index) => (
<span key={index}>
    {text.name}
    
</span>
 ));

Answer 2

Thanks for help. i've found the solution.I've just added to the patients API sort function. It looks like that

  const patients = await Patient.find({});
  patients.sort();
  res.json(patients);
});```