{
"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)"
]
}
I am trying to map the above objecttrans object ptr0 in jsx in browser where i want empty string in object to be considered as a empty line and each string in an object restricted to one line, something like this i am trying to show in browser jsx:
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)
Component where I am calling the Transcript Component
<Transcript
transcript={objecttrans.ptr0.map(pt=>{
return pt
})}
/>
Transcript Component
return (
<>
<div className="content">
<p>{props.transcript}</p>
</div>
</>
);
Join the array of lines into a single string using newlines:
const text = lines.join('\n');
Then put the text into a preformatted text element <pre> instead of a paragraph element <p> and style however you'd like.
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>Your code seems to be doing what you want it to do. If your issue was that new lines are not being shown, you can just return a br element when the string is empty. Something like:
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>