Search functionality in React

Question

so the problem is I have a search functionality everything works, except that when an item has not been found, you see it should display the text "champion has not been found" but it is not. I would appreciate the help Where am I making a mistake?

import data from './data.json'
import  './Champions.css'
import Skills from './Skills'
import CloseIcon from '@material-ui/icons/Close';



const Champions = ({searchValue}) => {
  const [toggleShow, setToggleShow] = useState(false);
  const [currentSelectedChampion, setCurrentSelectedChampion] = useState({});


  const handleSelectChampion = (id) => {
    if (!toggleShow) setToggleShow(true);
    const currentChampion = data.filter((champ) => champ.id === id)[0];
    setCurrentSelectedChampion(currentChampion);

  };


  function filterChampions(champion) {
    return champion.name.toLowerCase().includes(searchValue.toLowerCase());
  }

{data.filter(filterChampions).length === 0 && (<div className='not__found'>
          <h1>No champion has been found</h1>
        </div>)}

  return (
    <div className="champions">
    {data.filter(filterChampions).map((champion) => {
        return (
          <div key={champion.id} onClick={() => handleSelectChampion(champion.id) } >     
            <div className="champion">
              <img className="champion__Image" src={champion.image}></img>
              
              <h4 className="champion__Name">{champion.name}</h4>        
              {toggleShow && currentSelectedChampion.id === champion.id && (                
                <>
                  <Skills currentChampion={currentSelectedChampion} />
                    <CloseIcon onClick={() => setToggleShow(false)}/>              
                </>
              )}
             </div>
          </div>     
        );
      })}
         
    </div>
  );
};

export default Champions

How is the filter function defined? The one you call with data.filter. — Gh05d
– Gh05d, Commented Mar 8, 2021 at 13:00
{data.filter(filterChampions).map((champion) => { if(data.filter || champion){ return ( <div className='not__found'> <h1>No champion has been found</h1> </div> ) } -> This doesn't check there's any changes to the state variable, therefore this would never get rendered beyond the first time it's checked. Try loading the data in a hook, and then filter the data. — theabrar
– theabrar, Commented Mar 8, 2021 at 13:10
map on an empty array will not return anything, try [].map(e => 'called') and [3].map(e => 'called') you will see the difference. You need to check if there is data after the filter that is checking the length based on that display whatever you want to display. — Darshna Rekha
– Darshna Rekha, Commented Mar 8, 2021 at 13:27

Darshna Rekha · Accepted Answer · 2021-03-09 12:01:17Z

The map in line {data.filter(filterChampions).map((champion) => { will not return anything for empty array.

Consider the following examples.

[].map(e => 'called'); // []

[3].map(e => 'called'); // ['called']

So if {data.filter(filterChampions) returns an empty array the map will return empty array and not the div with class not__found.

What you need to do is something as following

  const showChamtions = () => {
    // Put the filtered data in a variable
    const selectedChampions = champions.filter((element) => element.score > 12);

    // If data is there do what you intend to do with it else not_found div

    if (selectedChampions && selectedChampions.length > 0) {
      return selectedChampions.map((element) => <p>{element.name}</p>);
    } else {
      return (
        <div className="not__found">
          <h1>No champion has been found</h1>
        </div>
      );
    }
  };

Example - https://codesandbox.io/s/map-on-empty-array-i6m1l?file=/src/App.js:349-741

You can modify your code similar to this using a conditional operator as well.

Co Pham · Accepted Answer · 2021-03-08 15:32:29Z

1

{data.filter(filterChampions).map((champion) => {
      if(data.filter || champion){
        return (
        <div className='not__found'>
          <h1>No champion has been found</h1>
        </div>
        )
      }

This if statement is not nesserasy, if an item has not been found => data.filter(filterChampions) will be an empty array, the map function will return nothing, the if statement doesn't even run.
It you want to display the message, you could simply use this:

{data.filter(filterChampions).length === 0 && (<div className='not__found'>
          <h1>No champion has been found</h1>
        </div>)}

edited Mar 8, 2021 at 15:32

answered Mar 8, 2021 at 14:41

Co Pham

3712 silver badges8 bronze badges

5 Comments

Co Pham Over a year ago

Sorry, forgot the parentheses, (<div className='not__found'> <h1>No champion has been found</h1> </div>). Check if it work or not?

Co Pham Over a year ago

Where did you put the code, it should be outside the filter.

mura1 Over a year ago

I have updated the question for you to see where have I putten it

Darshna Rekha Over a year ago

@mura1 You should add the block of code inside return. And you need to convert it from && to a conditional operator to handle both scenarios.

Co Pham Over a year ago

@mura1 Simply put my code below this: <div className="champions"> and it will work. If you want a better solution you can read the other guy's answer.

Collectives™ on Stack Overflow

Search functionality in React

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related