CODEWITHSUNDEEP
javascriptreactjsfrontend
nuha ali
nuha ali

Reputation: 21

Filter a list based on Input

const App = () => {
  const [searchTerm, setSearchTerm] = React.useState('');
  const stories = [
    ...
  ];

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };

  const searchStories = stories.filter((story) => {
    return story.title.includes(searchTerm);
  })

  return (
    <div>
      <h1>My Hacker Stories</h1>
      <Search onSearch={handleSearch}/>
      <hr />
      <List list={searchStories}/>
    </div>
  );
};

const Search = (props) =>{

  return (
    <div>
      <label htmlFor="search"><strong>Search:</strong></label> { ' '}
      <input id='search' type='text' onChange={props.onSearch}/>
    </div>
  );

};


const List = ({list}) =>
  list.map((item) =>
     (
      <div key={item.objectID}>
        <span>
          <a href={item.url}>{item.title}</a>
        </span>
        <span>{item.author}</span>
        <span>{item.num_comments}</span>
        <span>{item.points}</span>
      </div>
    )
  )

I am trying to filter the List Component based on the search input. It's working unless if I put a search term in the input box. When I try to search an item, List is empty, nothing is showing, it's empty List, however, there is no error showing.

Upvotes: 2

Views: 462

Answers (2)

Mamunur Rashid
Mamunur Rashid

Reputation: 1185

The filter function checks whether the searchTerm is present in our story item's title, but it's still too opinionated about the letter case. If we search for "react", there is no filtered "React" story in your rendered list. To fix this problem, we have to lower case the story's title and the searchTerm.

const App = () => {
  ...

  const searchedStories = stories.filter(function(story) {
    return story.title
      .toLowerCase()
      .includes(searchTerm.toLowerCase());
  });

  ...
};

Upvotes: 0

Taghi Khavari
Taghi Khavari

Reputation: 6582

I've change your code a little to produce a runnable snippet which you can change back to your code,

just need to add another state for searchStories and use useEffect for filtering when searchTerm changes like this:

*Click the Run Code Snippet and type h so you can see how filter works

const App = () => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchStories, setSearchStories] = React.useState([]);
  const stories = ["hello", "hi", "bye", "have a good day"];

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };

  React.useEffect(() => {
    setSearchStories(
      stories.filter(story => {
        return story.includes(searchTerm);
      })
    );
  }, [searchTerm]);

  return (
    <div>
      <h1>My Hacker Stories</h1>
      <Search onSearch={handleSearch} />
      <hr />
      <List list={searchStories} />
    </div>
  );
};

const Search = props => {
  return (
    <div>
      <label htmlFor="search">
        <strong>Search:</strong>
      </label>{" "}
      <input id="search" type="text" onChange={props.onSearch} />
    </div>
  );
};

const List = ({ list }) =>
  list.map(item => (
    <div key={item}>
      {item}
      {/* <span>
        <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span> */}
    </div>
  ));

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
<div id="root"></div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

Upvotes: 2

Related Questions