{ "ptr0": [ "Interviewer: Nancy Carolyn Camp Foster (NF)", "", "Interviewee: Edith Mills (EM)", "", "NF: Well it's kind of interesting to observe how students have turned out who've", "gone through Bristow schools. We lose track, we don't really realize and", "", "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)" ] }Estoy tratando de mapear el objeto objecttrans anterior ptr0 en jsx en el navegador donde quiero que la cadena vacía en el objeto se considere como una línea vacía y cada cadena en un objeto restringido a una línea, algo como esto que estoy tratando de mostrar en el navegador jsx :
Entrevistador: Nancy Carolyn Camp Foster (NF)
Entrevistada: Edith Mills (EM)
NF: Bueno, es un poco interesante observar cómo resultaron los estudiantes que
pasado por las escuelas de Bristow. Perdemos la pista, realmente no nos damos cuenta y
Otras personas: Lucy Mae Mills (LM) Mujer desconocida (WS)
Componente donde estoy llamando al Componente Transcripción
<Transcript transcript={objecttrans.ptr0.map(pt=>{ return pt })} />Componente de transcripción
return ( <> <div className="content"> <p>{props.transcript}</p> </div> </> );Une la matriz de líneas en una sola cadena usando líneas nuevas:
const text = lines.join('\n'); Luego coloque el texto en un elemento de texto con formato <pre> en lugar de un elemento de párrafo <p> y diseñe como desee.
const lines = [ "Interviewer: Nancy Carolyn Camp Foster (NF)", "", "Interviewee: Edith Mills (EM)", "", "NF: Well it's kind of interesting to observe how students have turned out who've", "gone through Bristow schools. We lose track, we don't really realize and", "", "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)", ]; const text = lines.join('\n'); document.querySelector('pre').textContent = text; <pre></pre>Su código parece estar haciendo lo que usted quiere que haga. Si su problema es que no se muestran las nuevas líneas, puede devolver un elemento br cuando la cadena está vacía. Algo como:
objecttrans.ptr0.map(pt => pt || <br />
const Transcript = props => <div className="content"> <p>{props.transcript}</p> </div>; const objecttrans = { "ptr0": [ "Interviewer: Nancy Carolyn Camp Foster (NF)", "", "Interviewee: Edith Mills (EM)", "", "NF: Well it's kind of interesting to observe how students have turned out who've", "gone through Bristow schools. We lose track, we don't really realize and", "", "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)" ] }; ReactDOM.render( <Transcript transcript={objecttrans.ptr0.map(pt => pt || <br />)} />, document.body ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>