import React,{ useEffect, useState} from 'react'; import { useLocation } from 'react-router-dom'; import ReactPlayer from 'react-player'; import { useResultContext } from '../contexts/ResultContextProvider'; export const Results = () => { const {getResults, results, isLoading, searchTerm} = useResultContext(); const location = useLocation(); const [num, setNum] = useState(10); const changeNum=()=>{ setNum(num+10); console.log(num) Results(); } useEffect(()=>{ if(searchTerm){ if (location.pathname ==='/videos') { getResults(`/search/q=${searchTerm} videos&num=${num}`) }else{ getResults(`${location.pathname}/q=${searchTerm}&num=${num}`) } } },[location.pathname, searchTerm, num, getResults]); switch (location.pathname) { case '/search': return (<><div className='flex flex-wrap justify-between space-y-6 sm:px-56 overflow-hidden pb-4 '> { results?.results?.map(({link, title, description}, index)=>( <div key={index} className='md:w-3/5 w-full'> <a href={link} target="_blank" rel="noreferrer"> <p className='text-sm text-green-700'> {link.length>50? link.substring(0,50): link} </p> <p className='text-lg hover:underline dark:text-blue-300 text-blue-700'> {title} </p> </a> {description.length>15? <p> {description} </p>:''} </div> )) } </div> <div onClick={changeNum} className='absolute bg-gray-200 border border-gray-400 py-3 px-10 rounded-full -mt-5 left-96 cursor-pointer active:bg-gray-300 dark:bg-gray-700 '> More Results </div> </>); default: return 'ERROR'; } };

Empecé a aprender a reaccionar y hace dos días que no puedo solucionar esto.

Estoy tratando de clonar el motor de búsqueda de Google y en este proyecto obtengo resultados usando la API de búsqueda de Google y mostrando 10 resultados al principio y luego quiero aumentar en 10 cada vez que hago clic en el botón 'Más resultados' que llama ' changeNum' que usa 'setNum' para agregar 10 valores a 'num' cada vez que se llama a la función haciendo clic en el botón.

EDITAR: acorté el código eliminando algunos casos