Zeilenumbrüche in Textbereichen in React

Question

Ich versuche, den Wert eines Textbereiches basierend auf einem vorhandenen Array festlegen, aber ich möchte die Array-Elemente durch eine neue Zeile in der Textarea getrennt werden. Ich möchte, dass das Textfeld die Elemente in der ungeordneten Liste enthält, damit ich eine Schaltfläche erstellen kann, die den Inhalt des Textareals in die Zwischenablage kopieren kann.

Ich bekomme diesen Fehler: Erwartete Unicode-Escape-Sequenz \ uXXXX Ich denke, wegen der \ n. Ich weiß wirklich nicht, was ich sonst tun soll. Vielen Dank im Voraus für Ihre Hilfe.

class NamesList extends Component{ 
 
\t constructor(props){ 
 
\t \t super(props); 
 

 
\t } 
 

 
\t render(){ 
 
\t \t const RenderedNames = this.props.formattedNames.map((name, index) => { 
 
\t \t \t return <li key={index} >{name}</li> 
 
\t \t }); 
 

 
\t \t const formattedNamesBreak = this.props.formattedNames.map((name, index) => { 
 
\t \t \t return name \n 
 
\t \t }); 
 

 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t <ul className='media-list list-group'> 
 
\t \t \t \t {RenderedNames} 
 
\t \t \t </ul> 
 
\t \t \t <textarea className='hidden' readOnly='true' value={formattedNamesBreak}></textarea> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
\t 
 
}; 
 

 

 
export default NamesList;

Answer 1

Als Ihr Array ist ein Array von Strings (die Namen), die Sie nicht brauchen, weil map() dass eine resultierende Array schaffen würde und wenn Sie ein Array ausgeben als die versuchen, Textarea-Wert, wird in eine Zeichenfolge mit Kommas konvertiert, um die Werte zu trennen.

Die Lösung ist Array.prototype.join() auf dem Array zu rufen und eine neue Linie als „Klebstoff“ verwenden:

var formattedNamesBreak = this.props.formattedNames.join('\n');