Css - Search bar in React

mOna
July 9, 2023
170 views
0 votes
2 Answers

I have one page that has a search bar and under that bar I have 6 links that lead to some other pages. Every link is a square made of image and paragraph. I want to type something in the search bar and want to display those squares which contain word in search bar in their paragprah.

This is my code:

import React, { useState } from 'react'
import klima from '../img/klima.png'
import { Link, LinkProps } from 'react-router-dom'

function Snizenje() {
    
 

    return (
        <div className='sm:w-full sm:h-200vh sm:flex ponuda'>
            <div className='div-izdvajamo-iz-ponude flex flex-col'>

                <h1 className='izdvajamo-iz-ponude'>Izdvajamo iz ponude</h1>
                <div className='linija'></div>
                
                
                <Link to='/akcije' key='link-akcije' className='linkovi'>Akcije</Link>
                <div className='linija'></div>
                <Link to='/novosti' key='link-novosti' className='linkovi'>Novosti</Link>
                <div className='linija'></div>
                <Link to='/gaming-korner' key='link-gamingKorner' className='linkovi'>Gaming korner</Link >
                <div className='linija'></div>
                <Link to='/promocije' key='link-promocije' className='linkovi'>Promocije</Link>
                <div className='linija'></div>
                <Link to='/promocije-u-prodavnici' key='link-promocijeProdavnice' className='linkovi'>Promocije u prodavnicama</Link>
                <div className='linija'></div>
                
                
            </div>



            <div className='akcija flex-col'>
                <h1 className='naslov'>Akcije</h1>
                <input type="text"
                 placeholder='Unesite pojam za pretragu' 
                 
                 className='pretraga' 
                 />
                 


                const originalData =[
                    <div className='grid grid-rows-2 grid-flow-col gap-4 mt-5'>
                   
                   <Link to='/klime' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </Link>
                   <a href='https://gigatron.rs/akcije?strana=2' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </a>
                   <a href='https://gigatron.rs/akcije?strana=2' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </a>
                   <a href='https://gigatron.rs/akcije?strana=2' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </a>
                   <a href='https://gigatron.rs/akcije?strana=2' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </a>
                   <a href='https://gigatron.rs/akcije?strana=2' className='kvadrat'>
                       <img src={klima} alt="" className='h-40' />
                       <p className='kvadrat-p'>Super ponuda klima uređaja - GREE</p>


                   </a>



               </div>
                 ]
               
            </div>
        </div>
    )
}

export default Snizenje

also, I dont have button so I would have to press Enter to search

I have tried something like this but I keep getting errors about originalData that I can’t use in useState or Argument of type ‘Element[]’ is not assignable to parameter of type ‘SetStateAction<never[]>’

Answers

You need to initilise useState first like so :

const [data, setData] = useState([]); // Initial empty array

And move the originalData definition outside of the return statement and converted it into an array of objects, where each object represents a piece of data with properties like link, imgSrc, and text.

Like so :

`useEffect(() => {    // Set the originalData as the initial state for the data variable
    setData(originalData);
}, []);`

Try this example :

function Snizenje() {
  const [data, setData] = useState([]); // Initialize an empty array as the initial state

  // Define the originalData separately as an array of objects
  const originalData = [
    {
      link: '/klime',
      imgSrc: klima,
      text: 'Super ponuda klima uređaja - GREE',
    },
    {
      link: 'https://gigatron.rs/akcije?strana=2',
      imgSrc: klima,
      text: 'Super ponuda klima uređaja - GREE',
    },
    // Add more objects as needed
  ];

  useEffect(() => {
    // Set the originalData as the initial state for the data variable
    setData(originalData);
  }, []);

  // Rest of your JSX code...

}

for your specific use case , i am using the example given by @sb 007.you can filter text with the following text you have searched and then map. checkout the code snippet below

function Snizenje() {
  const [data, setData] = useState([]); // Initialize an empty array as the initial state
   const[searchItem,setSearchItem] = useState("") //string you will search 

  // Define the originalData separately as an array of objects
  const originalData = [
    {
      link: '/klime',
      imgSrc: klima,
      text: 'Super ponuda klima uređaja - GREE',
    },
    {
      link: 'https://gigatron.rs/akcije?strana=2',
      imgSrc: klima,
      text: 'Super ponuda klima uređaja - GREE',
    },
    // Add more objects as needed
  ];

  useEffect(() => {
    // Set the originalData as the initial state for the data variable
    setData(originalData);
  }, []);

  // Rest of your JSX code...
   return (
        <>
        <input onChange={(e) => setSearchItem(e.target.value)}/>
//filter the text that you searched and map the array
{data.filter(item => item?.text?.includes(searchItem)).map((item) => {
            return (
               {// your JSX}
        )
       }))}
      </>
)
}

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Search bar in React

Answers