Searchable input is not working in React.js

Question

I want to create searchable input but something went wrong that's why this is not working. How can I fix it?

My code:

import React, {useState} from 'react'; import "./styles.css"; export default function App() { const country_list = [ "Argentina", "Australia", "Belgium", "Belize", "China", "Iceland", "India", "Indonesia", "Iran", "Poland", "Portugal", "Romania", "Russia", "Saudi Arabia", "South Africa", "South Korea", "Swaziland", "Sweden", "Switzerland" ]; const [inputVal, setInputVal] = useState(); country_list.filter(country => { if(inputVal === ''){ return country; } else if (country.toLowerCase().includes(inputVal.toLowerCase())) { return country; } }); return ( <div className="App"> <input type="text" onChange={event => setInputVal(event.target.value)} /> {inputVal} {country_list.map((val, index)=>( <> <div key={index}> {val} </div> </> ))} </div>) }

You never assign the result of filter to anything

Konrad
– Konrad

2023-02-08 09:18:09 +00:00
Commented Feb 8, 2023 at 9:18 — Konrad
– Konrad, Commented Feb 8, 2023 at 9:18

Daniil Emelin · Accepted Answer · 2023-02-08 09:53:15Z

To make that code work you should fix some strings. I posted comments bellow. Also I recommend move your changable variables like country_list to useState because the state of your app can get out of sync with the view.

import React, { useState } from 'react'; import "./styles.css"; export default function App() { let country_list = [ "Argentina", "Australia", "Belgium", "Belize", "China", "Iceland", "India", "Indonesia", "Iran", "Poland", "Portugal", "Romania", "Russia", "Saudi Arabia", "South Africa", "South Korea", "Swaziland", "Sweden", "Switzerland" ] // change country_list to let so we could reasssign it; const [inputVal, setInputVal] = useState(''); // use empty string in useState as initial state for you inputVal country_list = country_list.filter(country => { if (inputVal === '') { return country; } else if (country.toLowerCase().includes(inputVal.toLowerCase())) { return country; } }); // function filter in JS create new array everytime instead of changing the old one. You should reassign your country_list variable return ( <div className="App"> <input type="text" onChange={event => setInputVal(event.target.value)} /> {inputVal} {country_list.map((val, index) => ( <> <div key={index}> {val} </div> </> ))} </div>) }

kind user · Accepted Answer · 2023-02-08 09:19:06Z

I want to create searchable input but something went wrong thats why this is not working. How can i fix it?

Your code seems fine, just move it to the return block, before mapping:

 {country_list.filter(country => { if(inputVal === ''){ return country; } else if (country.toLowerCase().includes(inputVal.toLowerCase())) { return country; } }).map((val, index)=>( ... )}

EL Amine Bechorfa · Accepted Answer · 2023-02-08 10:22:50Z

I believe that using this going to work, move your code to the return () and map the returned value from the filter try this code below and its gonna work :)

{countryList .filter((country) => { if (inputVal == "") { return country; } else if (country.toLowerCase().includes(inputVal.toLowerCase())) { return country; } }) .map((Val, index) => { return ( <div key={index}> {val} </div> ); })}

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

MenTalist · Accepted Answer · 2023-02-08 10:36:41Z

You can do like this if you want data

import React, { useState } from "react"; import "./styles.css"; export default function App() { const country_list = [ "Argentina", "Australia", "Belgium", "Belize", "China", "Iceland", "India", "Indonesia", "Iran", "Poland", "Portugal", "Romania", "Russia", "Saudi Arabia", "South Africa", "South Korea", "Swaziland", "Sweden", "Switzerland" ]; const [inputVal, setInputVal] = useState(" "); const countryList = country_list.filter((country) => { if (inputVal === "") { return country; } else if (country.toLowerCase().includes(inputVal.toLowerCase())) { return country; } return country; }); console.log(countryList); return ( <div className="App"> <input type="text" onChange={(event) => setInputVal(event.target.value)} /> {inputVal} {countryList.map((val, index) => ( <> <div key={index}>{val}</div> </> ))} </div> ); }

Collectives™ on Stack Overflow

Searchable input is not working in React.js

4 Answers 4

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Related