Estoy usando una API de poesía en mi aplicación y cuando recibo las líneas del poema en JSON, tienen el siguiente formato:
líneas: Array(14) 0: "Conocí a un viajero de una tierra antigua" 1: "Quién dijo: Dos vastas piernas de piedra sin tronco" 2: "Párate en el desierto... Cerca de ellos, en la arena" 3: "Medio hundido, un rostro destrozado yace, cuyo ceño fruncido", 4: "Y labio arrugado, y mueca de frío mando", 5: "Di que su escultor lee bien esas pasiones" 6: "Que aún sobreviven, estampadas en estas cosas sin vida”, 7: “La mano que se burlaba de ellos, y el corazón que alimentaba:” 8: “Y en el pedestal aparecen estas palabras:” 9: “'Mi nombre es Ozymandias, rey de reyes:” 10: “ ¡Mirad mis obras, poderosos, y desesperaos!'" 11: "Nada más queda. Alrededor de la descomposición" 12: "De ese naufragio colosal, ilimitado y desnudo" 13: "Las arenas solitarias y planas se extienden lejos". longitud: 14
Tengo problemas para mostrar cada elemento de la matriz JSON como una nueva línea cuando lo envío a mi página.
Actualmente tengo un componente que mapea cada poema devuelto en una tarjeta con el autor, título y líneas respectivos del poema.
poem.map(item => { let author = item.author; let title = item.title; let lines = item.lines; if (author != undefined && title != undefined) { return ( <> <div className="viewer"> <div className="author">{author}</div> <div className="title">{title}</div> <div className="lines">{lines}</div> </div> </> ); } });Lo que termina mostrándose en mi página web es cada línea después de la siguiente sin ningún salto de línea entre ellas.
Puede intentar aplicar el css display: block; al viewer y eso hará que cada div hijo del viewer ocupe todo el ancho del padre
Si coloca texto en un <div> , no tendrá saltos de línea de forma predeterminada. Para obtener saltos de línea, deberá colocar cada línea en su propio elemento de bloque (como <div> ) o insertar una etiqueta <br/> entre cada línea.
Aquí hay un ejemplo de cada uno. https://jsfiddle.net/bdLru78c/
En su código actual, las líneas de poema se muestran en función de los datos JSON originales sin saltos de línea. Creo que podemos resolver este problema como se muestra a continuación.
<div className="lines"> {lines.map((line)=> { <div>{line}</div> })} </div> Además, puede usar la declaración for esto. Por favor, hágamelo saber si tiene problemas.