function Input() { const [input, setInput] = useState(""); function handleSearch() { let url = "https://google.com/search?q=${input}" window.open(url) } return ( <div className="input-wrap"> <input type="text" className="input__search" placeholder="Enter your search..." value={input} onChange={(e) => setInput(e.target.value)}></input> <button className="input__search--btn" onClick={handleSearch}> <i className="fa-solid fa-magnifying-glass"></i> </button> </div> ); }
The search button when clicked will redirect you to a google search based on the value from the input field, below is the site for advanced search, when active the link will add an additional link after "https://google.com/search?q=${input}+site%3A${activepage}.com
, how do I check if one or many sites are active then pass down its name to url
P/s: code for toggling websites
function WebButton({ icon, name }) { const [active, setActive] = useState(false); function handleToggle() { setActive(!active); } return ( <button className={active ? "websites-btn active" : "websites-btn"} onClick={handleToggle}> <i className={icon}></i> <div className="websites-name">{name}</div> </button> ); }
Advertisement
Answer
You can keep a root level state to gather active links to a state. And pass it to the Input
component.
- Update your
Input
component to accept array called “ and update thehandleSearch
to useOR
operation in google search.
function Input({ activeLinks }) { const [input, setInput] = useState(""); function handleSearch() { if (activeLinks.length > 0) { let compundSearchURL = `https://google.com/search?q=${input}`; activeLinks.forEach((link, i) => { compundSearchURL += `+${i > 0 ? "OR+" : ""}site%3A${link}.com`; }); window.open(compundSearchURL); } else { window.open(`https://google.com/search?q=${input}`); } } return ( <div className="input-wrap"> <input type="text" className="input__search" placeholder="Enter your search..." value={input} onChange={(e) => setInput(e.target.value)} ></input> <button className="input__search--btn" onClick={handleSearch}> <i className="fa-solid fa-magnifying-glass">Search</i> </button> </div> ); }
- Accept another function in
WebButton
calledtoggleActiveLink
and a string calledvalue
which refers to the URL part. Call the function with the value insidehandleToggle
function.
function WebButton({ icon, name, toggleActiveLink, value }) { const [active, setActive] = useState(false); function handleToggle() { setActive(!active); toggleActiveLink(value); } return ( <button className={active ? "websites-btn active" : "websites-btn"} style={{ color: active ? "blue" : "unset" }} onClick={handleToggle} > <i className={icon}></i> <div className="websites-name">{name}</div> </button> ); }
- In the main component you have to create a local state to handle the active links. Create the toggle function as given. It will add the value if it is not there otherwise remove it.
const urls = [ { name: "Reddit", value: "reddit" }, { name: "Quora", value: "quara" }, { name: "Facebook", value: "facebook" }, { name: "Stackoverflow", value: "stackoverflow" }, { name: "Twitter", value: "twitter" } ]; function App() { const [activeLinks, setActiveLinks] = useState([]); const toggleActiveLink = (link) => { const index = activeLinks.indexOf(link); if (index < 0) { setActiveLinks((prevLinks) => [...prevLinks, link]); } else { setActiveLinks((prevLinks) => prevLinks.filter((l) => l !== link)); } }; return ( <> <Input activeLinks={activeLinks} /> <div> {urls.map(({ name, value }) => ( <WebButton name={name} value={value} toggleActiveLink={toggleActiveLink} /> ))} </div> </> ); }