How to Implement a Search Box in Next.js

Ayush Rudani — Sun, 12 May 2024 16:32:53 +0000

Here's a simple way to add search 🔎 functionality in Next.js.

Preview 🪟:

First, you need to have a state for your search input and the list of elements. You can use React's useState for this.

import { useState } from 'react';

export default function Home() {
  const [search, setSearch] = useState('');
  const [list, setList] = useState([]); // This should be your fetched list
  ...
}

Next, create an input field for the search. The onChange event will update your search state every time the user types into the field.

<input
  type="text"
  value={search}
  onChange={(e) => setSearch(e.target.value)}
  placeholder="Search..."
/>

Now, filter your list based on the search input. You can use JavaScript's filter method for this. This will create a new array with all the elements that pass the test implemented by the provided function.

const filteredList = list.filter((item) =>
  item.toLowerCase().includes(search.toLowerCase())
);

Finally, map through your filteredList to display the items.

{filteredList.map((item, index) => (
  <div key={index}>{item}</div>
))}

Here's the complete code:

import { useState } from 'react';

export default function Home() {
  const [search, setSearch] = useState('');
  const [list, setList] = useState([]); // This should be your fetched list

  const filteredList = list.filter((item) =>
    item.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search..."
      />

      {filteredList.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

This is a basic implementation and might need to be adjusted based on your specific use case and data structure. Hope this helps! Let me know if you have any other questions. 😊

Stay Connected and Get More Insights

If you find this guide helpful and are dealing with similar challenges, feel free to reach out to me at https://ayushrudani.com. For more tech insights and updates, consider following me on GitHub. Let's innovate together!

Docker (🐳) & Kubernetes (☸) in simple terms.

Ayush Rudani — Sat, 28 Jan 2023 08:36:13 +0000

Please explain kubernetes to me as I am 5 years old.

Okay, so imagine you have a toy box full of little toy cars. Each toy car is like a computer program that does a specific job, like driving a train or flying a plane. Now, imagine you have a lot of toy boxes and you want to make sure that all the toy cars are in the right toy boxes, and that the toy boxes are in the right room. Kubernetes is like a special helper that makes sure all the toy cars are in the right toy boxes and that the toy boxes are in the right room. It also makes sure that if you want more toy cars to play with, it will get them for you and put them in the right toy boxes. And if some toy cars break, it will take them out and fix them so you can play with them again.

So in summary, Kubernetes is a tool that helps you to organize and manage your computer programs (like toy cars) in a smart way so that you can play with them easily.

Okay, then. So, what exactly is Docker?

Docker is a tool that helps you to pack your computer programs (like toy cars) into special containers (like toy boxes) so that they can run on any computer.

Think of Docker like the toy box itself, it's a containerization technology that allows developers to package their application and dependencies together in a container, which is a single executable package that includes everything needed to run the application code.
It makes it easy to move the toy cars (your computer programs) around, from your computer to a friend's computer, or even to a big toy store (a computer server) where lots of people can play with them.

So, to summarise, while Kubernetes is a tool that helps you to organize and manage your computer programs in a smart way, Docker is a tool that helps you to package your computer programs in a way that makes it easy to move them around and run them on any computer.

For those who are ready to roll up their sleeves and dive right into Docker & Kubernetes, check out this hands-on tutorial that takes you through the ins and outs of it.

Many thanks to @mariuszmspace for providing me with these awesome tutorial links.

DEV Community: Ayush Rudani

How to Implement a Search Box in Next.js

Stay Connected and Get More Insights

Docker (🐳) & Kubernetes (☸) in simple terms.

Stay Connected and Get More Insights