some of the image not showing up when I use if statement react.js

Question

I'm trying to make a section that shows just 10 images for each category and I want to insert a button after that and link it with the rest of the items but once I use if statement some categories not showing on at all and I tried to use "useState" if the key is < 10 set the state to true else set it to false and it's not working either, is there other ways that I can try it ?

import React , {useState , useEffect , useRef} from "react";
function Category() {
    const [active , setActive] =useState(false)
    const [button , setButton] = useState('all')
    const [data , setData] =useState([])
    useEffect( async()=>{
        const data = await fetch('https://ktgamez.com/storage/games.json')
        const items = await data.json()
        setData(items)
    } , [fetch])

    const handleClickAction = ()=>{
        setButton('Action')
     
    }
    const handleClickAll = ()=>{
        setButton('all')
     
    }
    const handleClicEducational = ()=>{
        setButton('Educational')
        
        
    }
    const handleClicArcade = ()=>{
        setButton('Arcade')
        
    }
    const handleClicSports = ()=>{
        setButton('Sports & Racing')
        
    }
    const handleClicPuzzle = ()=>{
        setButton('Puzzle')
        
    }

  return (
    <div className="category">
        <p className="active-category">{button} Games</p>
      <div className="dropdown">
            <div className="dropdown-btn" onClick={()=>{
                setActive(!active)
            }}><h3> Categories </h3></div>
            {active &&(
            <div className="dropdown-content">
                    <div onClick={handleClickAll} className="dropdown-item">
                                 All
                              </div>
                                 <div onClick={handleClickAction} className="dropdown-item">
                                 Action
                              </div>
                            <div onClick={handleClicEducational} className="dropdown-item">
                                 Educational
                            </div>
                         <div onClick={handleClicArcade}  className="dropdown-item">
                                Arcade 
                         </div>
                        <div onClick={handleClicSports}  className="dropdown-item">
                         Sports and Racing
                    </div>
                    <div onClick={handleClicPuzzle} className="dropdown-item">
                         Puzzle
                    </div>
                </div>
            )}
      </div>
  
      <div className="cards">
      {
           
          data.map((data , key)=> {
            // if ( key < 10 && button === 'all' || key <10 && button === data.genre_name ){
               //or :  if(key < 10){return}
               //even if tried to do this style= {{display : key <10 ? 'block' : 'none'}}
             if (key < 10 && button === 'all' || key < 10 && button === data.genre_name){
                return(
                    <div className="card-content" key={key} >
                        <div className="card-img">
                            <img src={data.game_cover_url} alt="" />
                        </div>
                        <div className="card-inner-title">
                            <p>{data.game_name}</p>
                        </div>
                    </div>
                )
              } 
        } 
        ) 
     }
      </div>
      <button>see all</button>
    </div>
  );
}

Answer 1

Instead of using key just try doing this

 data.map(data => {  
         //Your Code Here
}).slice(0,10);

Here .slice() method will reduce your array size to 10. So just get the whole out put and slice it down

Answer 2

First Ten Element Show

data.length > 0 && data.slice(0, 10).map((data , key)=> {
    ...your code
})