1

tengo la siguiente linea:

<div className="col-md-10">                
    { tab + item.name} 
</div>

se trata de una parte de una función recursiva, la cual imprime sus hijos de cada padre, la cuestion es que en la variable tab va hacer igual a (tab + \t) cada vez de llame de forma recursiva a la funcion, algo como esto:

(tab + `\t`)

y la funcion la tengo declara como:

function list(data, tab){
.
.
    data.map( item => {
     .
     .
    <div className="col-md-10">                
        { tab + item.name} 
    </div>
    .
    .
    )
.
.
}

estoy obteniendo esto como resultado:

name 1
name 2
name 3

y quiero algo como:

name 1
      name 2
            name 3

realice una prueba por medio de la consola, imprimiendo tab y alli si esta tabulando cada nombre, pero al verlo en la vista de la lista no se esta tabulando, a que se debera esto?

1 respuesta 1

2

El problema puede estar en que html no reconoce los espacios, una forma para que html te reconozca los espacios es con \u00A0 esto es igual a 1 espacio en blanco.

por lo tanto puedes tener tu tab declarada con los espacios

const tab = '\u00A0';

Otra forma de colocar tab coloca los 4 espacios en blanco que contiene un tab usando &nbsp;. Lo declaramos de la siguiente manera para evitar errores.

const tab = <>&nbsp;&nbsp;&nbsp;&nbsp;</>;

Una ves declarado lo podemos utilizar, un ejemplo de su uso es el siguiente.

<p>texto con un tab{tab}para separar texto</p>
6
  • no me reconocio el "&nbsp;" da error, es extraño, use este ''\u00A0" y si me funciona.... Gracias por tu ayuda!
    – Gerarca
    Commented el 5 may. 2021 a las 17:40
  • @Gerarca, Que error te marco ?
    – Richard
    Commented el 5 may. 2021 a las 18:00
  • @Gerarca, ok es bueno que hayas logrado resolver el problema, por favor agrega tu como respuesta el como lo solucionaste y aceptarla como correcta o igual puedes editar mi respuesta para cambiar lo que si te funciono. Cualquiera de las opciones es valida, para ayudar a otros a resolver el mismo problema o similares.
    – Richard
    Commented el 5 may. 2021 a las 18:01
  • al usar &nbsp da el error "Unexpected token" revisa este ejemplo codesandbox.io/s/2ozywv8knj
    – Gerarca
    Commented el 5 may. 2021 a las 19:07
  • 1
    @Gerarca funciona de forma correcta utilizada de esta manera <h2>Start editing to see&nbsp;&nbsp;&nbsp;&nbsp;some magic happen!</h2> Por si aun te sirve lo puedes utilizar, realizare pruebas directas en un compilador y mejorare la respuesta.
    – Richard
    Commented el 5 may. 2021 a las 19:21

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.