title: Change objects position in array in react
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>[
      {
          "id": 10001,
          "title": "I fort eshte Perendia",
          "textLineOne": "Emri i tij eshte me i lart",
          "textLineTwo": "Se cdo emer tjeter",
          "textLineThree": "E madhe eshte fuqia e tij",
          "saved": false,
          "lyrics": "I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte Perend&lt;span id='C'&gt;ia&lt;/span&gt;&lt;br&gt;I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte mbreti &lt;span id='C'&gt;yne&lt;/span&gt;&lt;br&gt;I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte Zoti &lt;span id='C'&gt;yne&lt;/span&gt;&lt;br&gt;M&lt;span id='C'&gt;bi&lt;/span&gt; gjithec&lt;span id='D'&gt;ka&lt;/span&gt; sund&lt;a href='#g'&gt;on&lt;/a&gt;",
          "date": "",
          "key": "G",
          "genre": "Adoration",
          "theme": "Standard"
      },
      {
          "id": 10002,
          "title": "Jam bir i Perendise",
          "textLineOne": "Jo nuk jam me skllav ne frike",
          "textLineTwo": "Jam bir i Perendise",
          "textLineThree": "Jam bir i Perendise",
          "saved": false,
          "lyrics": "",
          "date": "",
          "key": "C",
          "genre": "Worship",
          "theme": "Standard"
      },
      {
          "id": 10003,
          "title": "Te hapim portat",
          "textLineOne": "Dyert e vdekjes, shperthen Ai",
          "textLineTwo": "Dhe mposht fuqite e ligesise",
          "textLineThree": "I japim lavdi, ne fron atij",
          "saved": false,
          "lyrics": "I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte Perend&lt;span id='C'&gt;ia&lt;/span&gt;&lt;br&gt;I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte mbreti &lt;span id='C'&gt;yne&lt;/span&gt;&lt;br&gt;I &lt;a href='#g'&gt;fort&lt;/a&gt; eshte Zoti &lt;span id='C'&gt;yne&lt;/span&gt;&lt;br&gt;M&lt;span id='C'&gt;bi&lt;/span&gt; gjithec&lt;span id='D'&gt;ka&lt;/span&gt; sund&lt;a href='#g'&gt;on&lt;/a&gt;",
          "date": "",
          "key": "G",
          "genre": "Adoration",
          "theme": "Standard"
      }
  ]</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/TVEPd.png" rel="nofollow noreferrer">The image of what need to achieve</a>I want to achieve something like in the picture (attached)</p>
  <p>I have an array with objects which I am mapping over to create <strong>card</strong> components. The components generated will appear in a list and there will be a button which when I click that component moves before the component in front(this fo each of the  components)</p>
  <p>Parent component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useContext, useEffect } from "react";
  import { MenuContext } from "../contexts/MenuContext";
  import "./styles/Selector.css";
  import CloseIcon from "@mui/icons-material/Close";
  import ExpSongCard from "./ExpSongCard";
  
  function Selector() {
    const {
      setSelector,
      setSaved,
      checked,
      setChecked,
      expanded,
      setExpanded,
      data,
    } = useContext(MenuContext);
  
    function switchexp() {
      setExpanded(!expanded);
    }
  
    return (
      &lt;div
        className={`expander--container ${
          expanded ? "expanded" : "not--expanded"
        }`}
      &gt;
        &lt;div className="sel--header"&gt;
          &lt;button
            className="sel--close"
            onClick={() =&gt; {
              setChecked([]);
              setExpanded(false);
            }}
          &gt;
            &lt;CloseIcon style={{ fill: "#F6FAFF" }} fontSize="large" /&gt;
          &lt;/button&gt;
          &lt;div className={`sel--expander ${expanded ? "exped" : "not--exped"}`}&gt;
            &lt;button onClick={switchexp}&gt;
              {Object.values(checked).length}{" "}
              {Object.values(checked).length &gt; 1 ? " songs" : "song"} selected
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;button className="sel--play"&gt;Play&lt;/button&gt;
        &lt;/div&gt;
  
        {/* Show this when Selector is expanded */}
        {expanded === true &amp;&amp; (
          &lt;div className="sel--song--container"&gt;
            {checked &amp;&amp;
              Object.keys(checked).length &gt; 0 &amp;&amp;
              checked.map((item) =&gt; {
                return &lt;ExpSongCard key={item.id} selData={item} /&gt;;
              })}
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default Selector;</code></pre>
  </div>
  </div>
  </p>
  <p>The <strong>card</strong>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useContext } from "react";
  import { MenuContext } from "../contexts/MenuContext";
  import "./styles/ExpSongCard.css";
  import Chord from "../media/Gmaj.png";
  import BookmarkIcon from "@mui/icons-material/Bookmark";
  import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
  import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
  
  function ExpSongCard(props) {
    const { checked, setChecked } = useContext(MenuContext);
  
    // Add/Remove checked item from list
    const handleCheck = (selData) =&gt; {
      const array = [...checked];
      var removeIndex = array.map((i) =&gt; i.id).indexOf(props.selData.id);
      ~removeIndex &amp;&amp; array.splice(removeIndex, 1);
      setChecked(array);
    };
  
    //   Re-arrange selected songs list
  
    const changeIndex = () =&gt; {
      const array = [...checked];
      console.log(array.indexOf(props.selData.id));
    };
  
    return (
      &lt;div className="exp--card"&gt;
        &lt;button onClick={changeIndex} className="exp--up--icon"&gt;
          &lt;ArrowDropUpIcon sx={{ fontSize: 50 }} /&gt;
        &lt;/button&gt;
        &lt;img className="exp--chord" src={Chord} /&gt;
        &lt;div className="exp--body"&gt;
          &lt;h3 className="exp--title"&gt;{props.selData.title}&lt;/h3&gt;
          &lt;p className="exp--line--one"&gt;{props.selData.textLineOne}&lt;/p&gt;
          &lt;p className="exp--line--two"&gt;{props.selData.textLineTwo}&lt;/p&gt;
          &lt;p className="exp--line--one"&gt;{props.selData.textLineOne}&lt;/p&gt;
        &lt;/div&gt;
        &lt;label className="exp--save"&gt;
          &lt;input
            defaultChecked={true}
            // checked={defaultChecked}
            type="checkbox"
            className="exp--input"
            value={props.selData.id}
            onChange={handleCheck}
          /&gt;
          &lt;span className="exp--icon"&gt;
            &lt;BookmarkIcon sx={{ fontSize: 40 }} /&gt;
            {/* {props.checker === "done" ? (
              &lt;BookmarkIcon sx={{ fontSize: 40 }} /&gt;
            ) : (
              &lt;BookmarkBorderIcon sx={{ fontSize: 40 }} /&gt;
            )} */}
          &lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Anyone has an idea how can I achieve this?</p>
  <p><a href="https://i.stack.imgur.com/xY0XU.png" rel="nofollow noreferrer"></a></p>