tengo este codigo y quiero hacer un infinito scroll sin repetir la ID y trayendo una id random. Quiero usar react-infinite-scroll. Creo que los use effect los puedo juntar pero no se me ocurre como.
Creo que esta mal tomado, pero tengo un componente llamado <Hero/>
que le tengo que asignar un id para que se cree, ejemplo <Hero id={17}/>
. Mi pregunta es como hago para que se cree con distintas ID y como hacer el infinite scroll, ya que me esta dando error cuando asigno setItems
export const Home = () => {
const [items, setItems] = useState([16, 10, 11, 2, 4, 184, 123, 532, 234, 521, 541, 700, 100, 1, 519, 342, 234, 456, 76, 546, 324, 567, 331]);
useEffect(() => {
console.log('efecto ejecutado')
}, [])
const search = useFormik({
initialValues: {
text: '',
},
onSubmit: (heroData) => {
console.log(heroData)
},
});
return (
<div className='container-heros'>
<form className='search-bar' onSubmit={search.handleSubmit}>
<input type='text' name='text' placeholder='Search you hero' onChange={search.handleChange} />
<button type='submit'>Search</button>
</form>
<InfiniteScroll
hasMore={true}
dataLength={items}
>
<ul>
{items.map(item => (
<Hero id={item} />
))}
</ul>
</InfiniteScroll>
</div >
)
}