0

estoy haciendo un breadcrum, y necesito una mano para manejar strings de javascript. Tengo esto:

    const Breadcrumbs = (props) => {
    const elements = props.url.split('/');
    elements.shift();
    console.log(elements)
    return (
      <div className='breadcrums'>
        <Breadcrumb tag="nav" listTag="div">
           {
              elements.map((element,index) => {
                console.log(element)
                return <BreadcrumbItem key={index} tag="a" href={'/'+element} className='text-capitalize'>{element}</BreadcrumbItem>
              })
          }
      </Breadcrumb>
    </div>
  );
};

En la variable elements se guarda un array que contiene cada una de las partes de la url, algo asi: ["profile", "edit"] (en realidad me guarda un primer elemento vacio que elimino con .shift() )

Ahora, cuando yo hago el .map quisiera hacer lo siguiente: Que el primer elemento se pase como está ('profile'), y que el segundo elemento se concatene al primero, me explico?

Yo en este momento, tengo un breadcrum algo como:

Profile / Edit

Y el link de profile es http://localhost:3000/profile, mientras que el link de edit es http://localhost:3000/edit. Yo espero que sea http://localhost:3000/profile/edit

Muchas gracias

1
  • Si uso la funcion .reduce() puedo obtener algo como lo que quiero, pero no me doy cuenta como combinarla con el .map()
    – Agustin G.
    Commented el 13 dic. 2020 a las 23:21

1 respuesta 1

0

lo solucioné de la siguiente manera:

  1. Declaré una variable urlActual = '' antes del return

  2. Dentro del map le voy agregando en cada recorrido el valor actual de element: urlActual = urlActual+'/'+element;

     const Breadcrumbs = (props) => {
     const elements = props.url.split('/');
     elements.shift();
     const urlActual = '';
     return (
       <div className='breadcrums'>
         <Breadcrumb tag="nav" listTag="div">
            {
             elements.map((element,index) => {
             urlActual = urlActual+'/'+element;
             return <BreadcrumbItem key={index} tag="a" href={'/'+element} className='text-capitalize'>{element}</BreadcrumbItem>
           })
       }
       </Breadcrumb>
       </div>
      );
    };
    

Y este componente sirve para meter en cualquier página y pasarle por props la url actual, y generará automaticamente los links de cada miga de pan! Espero que le sirva a alguno! Saludos

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.