0

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 >
    )
}
1
  • O deberia hacerlo en el compenente que lo llamo. EJ: ``` <ul> <Hero id={17} /></ul> ```
    – fanjiooJr
    Commented el 19 jul. 2021 a las 14:23

1 respuesta 1

0

Primero que todo, cuando haces un map de componentes, debes darle una key. Usando de ejemplo tu array de números no repetidos:

<ul>
  {items.map(item => (
    <Hero key={item}/>
  ))}
</ul>

Ahora no sabes cuantos elementos vienen, pero obtienes un array de elementos a desplegar y te da lo mismo el número que se le asigne, entonces:

<ul>
  {listItems.map((item, i) => (
    <Hero key={i}/>
  ))}
</ul>

Recorres el array de listItems, y la key se signará de la posición de recorrido del map, lo cual asegura que no se repetirá. (0, 1, 2, etc..)

Por otro lado, cuando haces un InfiniteScroll, deberías sacar ese "UL" dado que el children del InifiniteScroll debe ser un array de componentes. Quedando así:

<InfiniteScroll
  hasMore={true}
  dataLength={items}
>
  {items.map(item => ( <Hero key={item} /> ))}
</InfiniteScroll>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.