n isn't a newline in HTML, it's just a space. Any series of whitespace characters in HTML is treated as one space.

The React part of this is how you use br elements to do what you want to do.

The easiest way is to tell the div to treat whitespace different, as discussed in this question's answers.

return <div style={{whiteSpace: "pre-line"}}>

    {item.intro}

</div>;

Or you could wrap the lines with an element, such as a div or p:

return <div>

    {item.intro.split(/n/).map(line => <div key={line}>{line}</div>)}

</div>;

Or if you want br elements between the lines, you can use fragments:

return <div>

    {item.intro.split(/n/).map(line => <React.Fragment key={line}>{line}<br/></React.Fragment>)}

</div>;

(We can't use the shorthand <>___</> form because they don't support keys.)

But I don't like that last one as it ends with a <br/>. You can fix that, but it's more complicated:

return <div>

    {item.intro.split(/n/).map((line, index) => index === 0 ? line : <React.Fragment key={line}>{line}<br/></React.Fragment>)}

</div>;