how can i map the string that are in the object where empty string considered as empty line and each string restricted to one line

Question

{
"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>
    </>
  );

Does this answer your question? [How to render an array of objects in React?](https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react) — Krzysztof Krzeszewski, Nov 30 '21 at 11:00
Show us what you have tried, because i believe it should fix the issue. — Krzysztof Krzeszewski, Nov 30 '21 at 11:14
In that example, there is only one value of the key while in my case there is only one key and many values of that key, i am confused — Muttarab Ahmad, Nov 30 '21 at 11:23

score 0 · Answer 1 · answered Nov 30 '21 at 12:07

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>

score 0 · Accepted Answer · answered Nov 30 '21 at 12:07

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>

how can i map the string that are in the object where empty string considered as empty line and each string restricted to one line

2 Answers2