How to push a specific object at top of the array of objects, without disturbing the sequence using-CodePudding

I am facing a little problem in code and seek your help .

Problem description : ( I have an array of objects (mainly 4 objects only), and each object is having the unique Id as its identifier primary key. I have 4 buttons, and each button's responsibility is to change the layout of the objects inside of the given array in a specific order. How to achieve this?, Well I am using react.Js)

Assets I have :

An array of 4 objects

const MyArray = [
 { id : 1, name : 'Elon'},
 { id : 2, name : 'Mark'},
 { id : 3, name : 'Bill'},
 { id : 4, name : 'Jeff'},
];

now I am mapping it over a component as

export default function MyComponent () {
// setting value 
const [ name, setName ] = useState(''); // initially don't know who is at top 
return (
<List>
 {PersonAtTop(name)}
</List> // as simple as a list , say for now!

// 4 buttons
<Button onClick = {() => setName('billAtTop')} >{'Keep Bill @ top'}</Button>

<Button onClick = {() => setName('markAtTop')} >{'Keep Mark @ top'}</Button>

<Button onClick = {() => setName('jeffAtTop')} >{'Keep Jeff @ top'}</Button>

<Button onClick = {() => setName('elonAtTop')} >{'Keep Elon @ top'}</Button>
)}

// there could be a function that receive ('billAtTop', 'markAtTop', 'elonAtTop', 'jeffAtTop', as arguments (all of type string))

function PersonAtTop( who : string ) {
switch(who) {
 case 'billAtTop' : return MyArray....map((array) => array.name ); // what to do here so that I would get 'bill' at top of the array and rest all the other remain unchanged

case 'markAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'mark' at top of the array and rest all the other remain unchanged

case 'jeffAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'jeff' at top of the array and rest all the other remain unchanged

case 'elonAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'elon' at top of the array and rest all the other remain unchanged;

default : return MyArray.map((array) => array.name); // default sorting here
}}

I need your help in building this logic, I hope you must have a good grasp of my situation. Once more, I am roughly giving the output as follows -

Orignally array is 

 1. Elon
 2. Mark
 3. Bill
 4. Jeff

case 1 : When Elon a@ top triggered , render the exact above order, no changes
case 2 : When Mark @ top is triggered, render - 
           1. Mark
           2. Elon
           3. Bill
           4. Jeff
case 3 : When Bill @ top is triggered, render - 
          1. Bill
          2. Elon
          3. Mark
          4. Jeff
case 4 : When Jeff @ top is triggered, render - 
         1. Jeff
         2. Elon
         3. Mark
         4. Bill

Here you could see, there is a queue type of structure where whatever comes at the top, the remaining order remains the same for all the elements underneath. Again, only top element occupies the position as per which button is clicked and what parameter do the function "PersonAtTop()" receives.

I think there is something to do with .reduce(), .sort(), and then .map(), if I am not wrong, maybe .push(), as well .

Please help me with this logic, I am stuck. All Suggestions are welcome. Thank You All.

CodePudding user response：

Check the below code.Hope this is what you expected

import { useEffect, useState } from "react";

export default function App() {
  const [name, setName] = useState("Elon");
  const [myArray, setMyArray] = useState([
    { id: 1, name: "Elon" },
    { id: 2, name: "Mark" },
    { id: 3, name: "Bill" },
    { id: 4, name: "Jeff" }
  ]);

  useEffect(() => {
    const selectedPerson = myArray.find(({ name: _name }) => _name === name);
    const filteredArray = myArray.filter(({ name: _name }) => _name !== name);
    setMyArray([selectedPerson, ...filteredArray]);
  }, [name]);

  return (
    <div className="App">
      {myArray.map((data) => (
        <button
          onClick={() => setName(data.name)}
        >{`Keep ${data.name} @ top`}</button>
      ))}
    </div>
  );
}

Link: https://codesandbox.io/s/stackhelp-arraysort-u1b3dx?file=/src/App.js