I want to enable texts to appear if I am typing anything in my input field in css-CodePudding

I want to see my result text appear if I type anything into my input field and disappear if it is not. My JSX:

import React, { useState } from "react";
import "./SearchBarStyle.css"

const SearchBar = () => {

    const waterInfo = [
        {title: "About Water", link:"https://en.wikipedia.org/wiki/Water"},
        {title: "Water (Molecule)", link: "https://en.wikipedia.org/wiki/Properties_of_water"},
        {title: "Water (Chemistry)", link: "https://pubchem.ncbi.nlm.nih.gov/compound/Water"}
    ]

    const [input, setInput] = useState("")

    const HandleInput = (event) => {
        setInput(event.target.value)
    }

    const filterItems = waterInfo.filter((wI) => { 
        return wI.title.includes(input)
    })

    
    return(
        <div>
                <input type={"text"} value={input} onChange={HandleInput} placeholder="About Water?" className="searchbar"/>
            <ul className="results">
                {filterItems.map((wI) => {
                    return <li><a href={wI.link} target="_blank" className="link">{wI.title}</a></li>
                
                })}
            </ul>
            
        </div>
    )
}

export default SearchBar

My CSS:

.results {
    text-align: center;
    list-style-type: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: none;
}

.searchbar:focus // 1. How to dectect if I am typing anything into the searchbar {
    // 2. How to toggle the results to appear if I type any word into the searchbar
}

So I want to see my result getting displayed whenever I type something into my searchbar. In question: 1. How to dectect if I am typing anything into the searchbar 2. How to toggle the results to appear if I type any word into the searchbar

CodePudding user response：

One approach can be to make use of a boolean variable which gets set based on the length of value and used inside a useEffect and eventually use the variable as a condition to render filtered results. Something like

 const [renderResults, setRenderResults] = useState(false)

 useEffect(() => {
    if(input.length > whateverLengthYouWant) setRenderResults(true);
    else setRenderResults(false);
  },[input]);

And then using the variable inside return like

{renderResults && filterItems.map((wI) => {
     return <li><a href={wI.link} target="_blank" className="link">{wI.title}</a></li>
 })}

CodePudding user response：

You can change your component like this :

import React, { useState, useEffect } from "react";
import "./SearchBarStyle.css"


const SearchBar= () => {

    const [waterInfo, setWaterInfo] = useState( [
        {title: "About Water", link:"https://en.wikipedia.org/wiki/Water"},
        {title: "Water (Molecule)", link: "https://en.wikipedia.org/wiki/Properties_of_water"},
        {title: "Water (Chemistry)", link: "https://pubchem.ncbi.nlm.nih.gov/compound/Water"}
    ])

    const [input, setInput] = useState("")

    const HandleInput = (event) => {
        setInput(event.target.value)
    }

    
    useEffect(() => {
      const waterInf = waterInfo.filter(wi => wi.title.toLowerCase().includes(input.toLowerCase()))
      setWaterInfo(waterInf)
    }, [input])
    console.log(waterInfo)
    
    return(
        <div>
                <input type={"text"} value={input} onChange={HandleInput} placeholder="About Water?" className="searchbar"/>
            <ul className="results">
                {waterInfo.map((wI) => {
                    return <li><a href={wI.link}target="_blank" className="link">{wI.title}</a></li>
                
                })}
            </ul>
            
        </div>
    )
}

export default SearchBar