Add Long string in react-CodePudding

I want to add code in text form but couldn't find any method to do this.I used multiline, "``" this sign, single and double quote. I want each and every program line in new line but its showing in single line/sentence.

import React from 'react';
import CodeEditor from './codeEditor';
import multiline from 'multiline';

const str = (`    
// A function to implement bubble sort
void bubbleSort(int arr[], int n)
{
    int i, j;
    for (i = 0; i < n - 1; i  )

        // Last i elements are already
        // in place
        for (j = 0; j < n - i - 1; j  )
            if (arr[j] > arr[j   1])
                swap(arr[j], arr[j   1]);
}
`)
export default function BubbleSort() {
  return (
    <CodeEditor Cpp={str} Java={'java'} Python={'python'} Javascript={'js'}/>
  )
}

Here is the codeEditor file

import { Collapse } from 'antd';
import React from 'react';
const { Panel } = Collapse;


const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
    return (
        <Collapse defaultActiveKey={['1']}>
      <Panel header="This is panel header with arrow icon" key="1">
        <p>{Cpp}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="2">
        <p>{Java}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="3">
        <p>{Python}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="4">
        <p>{Javascript}</p>
      </Panel>
    </Collapse>
    );
}

export default CodeEditor;

CodePudding user response：

Instead of using paragraph, could use try using pre block?

The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

MSDN Article - pre element

const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
  return (
      <Collapse defaultActiveKey={['1']}>
    <Panel header="This is panel header with arrow icon" key="1">
      <pre>{Cpp}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="2">
      <pre>{Java}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="3">
      <pre>{Python}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="4">
      <pre>{Javascript}</pre>
    </Panel>
  </Collapse>
  );
}