[HELP][REACT][useSTATE] Como quebrar linha no retorno do useState:?

Fala galera, decidi fazer umas mudanças no algoritmo do professor de react, só pra mostrar na página html os repositórios do usuário, mas quando retorna na tela eu não consigo quebrar linha de um repositório para outro, já tentei com /n e com
, me falaram que era possível com css mas tb n consegui. Se alguém conseguir dar uma luz ai.

a imagem ficou ruim, então:
página

console log

código

3 Likes

Você pode guardar os projetos do usuário em um state de array e fazer o loop nesse array dentro do return para renderizar uma lista, por exemplo. Aí cada repositório seria um li. Um exemplo parecido:
imagine uma lista de tarefas armazenada em
[tasks, setTasks] = useState([])
para renderizar cada tarefa em uma lista:
Screenshot from 2022-05-17 09-16-07

2 Likes

Laiane to tentando entender seu código tá?! essa ul seria no retorno do componente certo? esse nome da classe seria algo para estilização com bootstrap ou algo assim? Depois vc ta utilizando o map pra percorrer o vetor e para cada valor do vetor vc ta criando um li com um “taskCard” q é uma tag q vc criou. É isso msm? Não tenho familiaridade com React, JS e JSX, mas se for isso eu acho q sei aplicar na minha situação.

Isso, a ul está no retorno do componente. Para estilizar estou usando css modules pra não precisar me preocupar em colocar nomes diferentes nas classes de componentes variados, por isso o styles.nomeDaClasse no classname, o modules dá um nome aleatório pra ela aí não tem risco do estilo de um componente interferir em outro.
Sobre o map é isso mesmo, está percorrendo cada elemento do array tasks para renderizar um li para cada task. E o TaskCard é um componente que criei.
E é importante colocar uma key única em cada li para evitar bugs, assim você identifica cada elemento e ajuda o React :smiley:

1 Like

e esse task.id é gerado pelo proprio js? ou já possui no objeto task?

Tá no objeto task, no caso tasks é um array de objetos task com id e mais duas chaves. É que busquei um exemplo parecido com seu caso pq não codei essa aula kssksk

1 Like

Tecnicamente o quebra-linha ‘\n’ esta funcionando. No entanto, a tag p eh renderizada como display: block. Isso quer dizer que ela vai ocupar todo a tela do navegador.

Vc esta colocando na tag tag p todo o conteudo de ‘showItToYou’. React n vai saber onde termina ou comeca a nova linha. Cada repositorio teria quer a propria tag p
Eu recomendo vc fazer igual a @laiane. fazer um loop usando map(). Se vc nao tiver o id, vc pode especificar assim: map(el, id) =>.

O id eh o index da Array e o El sao os elementos do “showItToYou” do seu useState.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.