Onclick -- Move To The Top

In this article, we will be looking at how to move the clicked item to the first index. Emphasis in this article is not on the UI but on the functionality.

Before we proceed further, here are the prerequisite things to do before we dive in fully to the proper algorithm.

1. Create a React app

2. set-up tailwind CSS (or you can use your preferred CSS template or pure CSS). For tailwind setup, refer to https://tailwindcss.com/docs/installation.

3. Create a data array

4. create a state where the data will be stored

5. use useEffect to fetch the data

6. setup a function that places the clicked item to the first index

7. Map the list

Next thing to do is to create a folder in the src folder and call it component.

Inside the component folder, create a file called resorter.JS (This is where all the functionality will be written)

Import resorter.JS inside app.js.

In the resorter.JS, do the following:

1. Create a state where the data arrays will be stored

const [list, setList] = useState([]);

1. Create a function that sorts our arrays :

  const setFirst = ({ list = [], setList, itemIndex, item }) => {
    const _list = [...list];
    _list.splice(itemIndex, 1);
    const newList = [item, ..._list];
    setList(newList);

    localStorage.setItem('list', JSON.stringify(newList));
  };

Here, in the setFirst function, we are passing four parameters which i will be explaining below :

1. List --- list of users

2. setList --- function that updates our list arrays (const [list, setList] = useState([]);)

3. itemIndex --- index of the clicked user

4. item --- the clicked user

In the setFirst function, we first:

1 . spread our list of users

2 . Remove the clicked user using splice array method

(_list.splice(itemIndex, 1))

1. Create a new List of arrays

   (const newList = [item, ..._list])

2. Pass the new created array to the setList function that updates our list (setList(newList))

3. Set it to local storage if you want your data to stay the same after refreshing the browser.

The above-explained function (setFirst), is what will place any clicked item to the first index.

Next thing is to use useEffect to update our list arrays with the data we have created .

In my case, i have a file called data.js where i created the user data.

  useEffect(() => {
    const dataFromStorage = localStorage.getItem('list')
      ? JSON.parse(localStorage.getItem('list'))
      : [];

    if (dataFromStorage && dataFromStorage.length > 0) {
      setList(dataFromStorage);
    } else {
      setList(users);
    }
  }, []);

Next is to map our data and pass onClick to our map data, pass the setFirst function to the mapped data and passing all the required parameters to the function.

  {list.length > 0
        ? list.map((item, index) => {
            return (
              <Collections
                key={index}
                list={list}
                setList={setList}
                itemIndex={index}
                item={item}
                setFirst={setFirst}
              />
            );
          })
        : null}

const Collections = ({ list, setList, itemIndex, item, setFirst }) => {
  return (
    <div
      onClick={() => setFirst({ list, setList, itemIndex, item })}
      style={{
        padding: '1rem 0',
      }}
    >
      <p
        style={{
          cursor: 'pointer',
          border: '1px solid #909090',
          padding: '.5rem  1rem',
          width: 'max-content',
          margin: 'auto',
        }}
      >
        {item?.name}
      </p>
    </div>
  );
};

That's all for this article.

Full codes below:

import React, { useEffect, useState } from 'react';
import { users } from '../data';

const Resorter_2 = () => {
  const [list, setList] = useState([]);

  const setFirst = ({ list = [], setList, itemIndex, item }) => {
    const _list = [...list];
    _list.splice(itemIndex, 1);
    const newList = [item, ..._list];
    setList(newList);

    localStorage.setItem('list', JSON.stringify(newList));
  };

  useEffect(() => {
    const dataFromStorage = localStorage.getItem('list')
      ? JSON.parse(localStorage.getItem('list'))
      : [];

    if (dataFromStorage && dataFromStorage.length > 0) {
      setList(dataFromStorage);
    } else {
      setList(users);
    }
  }, []);
  return (
    <div
      style={{
        border: '1px solid grey',
        padding: '1rem',
      }}
    >
      {list.length > 0
        ? list.map((item, index) => {
            return (
              <Collections
                key={index}
                list={list}
                setList={setList}
                itemIndex={index}
                item={item}
                setFirst={setFirst}
              />
            );
          })
        : null}
    </div>
  );
};

export default Resorter_2;

const Collections = ({ list, setList, itemIndex, item, setFirst }) => {
  return (
    <div
      onClick={() => setFirst({ list, setList, itemIndex, item })}
      style={{
        padding: '1rem 0',
      }}
    >
      <p
        style={{
          cursor: 'pointer',
          border: '1px solid #909090',
          padding: '.5rem  1rem',
          width: 'max-content',
          margin: 'auto',
        }}
      >
        {item?.name}
      </p>
    </div>
  );
};