reactjs - Component freezes page when receiving a props

Question

I'm making a full stack app using MERN. I want to get all my add with an specific id pasing a category id from a page to the component. When I try to load the page with an id, the browser get stuck and a message appears saying: Keeping wait or stop the site.

This is the page:

import React from 'react'; import {useParams} from 'react-router-dom';

const VerAnuncios = () => {

    const {id} = useParams();
    return (
        <div>
            <VerAnuncios busqueda={id}/>
        </div>
    ) }

export default VerAnuncios;

And this is the component:

import React, { useEffect, useState } from 'react';
import Anuncio from './Anuncio';
import '../Styles/Anuncios.css';

/* Componente para renderizar todos los anuncios de una categoría */
/ * Component to render all the ads of a category * /

const VerAnuncios = ({busqueda}) => {
    const [anuncios, setAnucios] = useState([]);

    useEffect(() => {
        getAnuncios();
    }, []);

    const getAnuncios = () => {
        const response = await fetch(`http://localhost:3010/anuncios`);
        const data = await response.json();
        setAnucios(data);
    }
    return (
        <div>
            < div className="row">
                <h1>Anuncios de la categoría</h1>
                {anuncios.filter((anuncio) => {
                    if(busqueda == ""){
                        return(<div>No se han introducido nada</div>)
                    } else if (anuncio.titulo.toLowerCase().incluides(busqueda.toLowerCase())) {
                        return anuncio
                    }
                }).map(anuncio => {
                    <Anuncio
                        titulo={anuncio.titulo}
                        precio={anuncio.precio}
                        descripcion={anuncio.descripcion}
                        proveedor={anuncio.proveedor}
                    />
                })}
            </div>
        </div>
    );
};

export default VerAnuncios;

I don't know if i'm doing the things right or not, so I would love to know if it is correct or how I could improve or correct it.

Thank you.

question from:https://stackoverflow.com/questions/65938995/component-freezes-page-when-receiving-a-props

Answer 1

Sorry Posting here. I cannot comment due to low reputation right now.

In the code above your getAnuncios function needs to be async in order to call await inside that function.

Also there is space between < and div in the return

< div