CODEWITHSUNDEEP
javascriptreactjs
Rohit Verma
Rohit Verma

Reputation: 3783

Searchable input is not working in React.js

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>)
}

Upvotes: 0

Views: 88

Answers (4)

MenTalist
MenTalist

Reputation: 149

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>
  );
}

Upvotes: 0

EL Amine Bechorfa
EL Amine Bechorfa

Reputation: 251

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>
      );
    })}

Upvotes: 0

Daniil Emelin
Daniil Emelin

Reputation: 271

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>)
}

Upvotes: 1

kind user
kind user

Reputation: 41913

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)=>( ... )}

Upvotes: 1

Related Questions