set innerText on React

Question

J'ai une petite application qui prend l'entrée de l'utilisateur, et je veux leur montrer un petit aperçu en cours de frappe (exactement comme le fait Stackoverflow).

J'essaie quelque chose comme ceci:

ReactDOM.render(
    <div>{user_input}</div>, 
    document.getElementById('preview') 
); 

Il fonctionne très bien jusqu'à ce que j'essaie d'ajouter une nouvelle ligne, il ne tient pas compte et réagir rend juste un espace blanc. Mais si je le fais sur javascript vanille:

var content = document.createElement('div'); 
content.innerText = user_input; 
document.getElementById('preview').appendChild(content); 

Faire comme ça le tour est joué et chaque saut de ligne est automatiquement transformé en une étiquette <br>.

Existe-t-il un moyen de régler innerText sur réagir ou devrais-je simplement aller avec la solution de vanille?

Y a-t-il un revers dans l'utilisation de innerText?

Answer 1

Le code ci-dessous peut être ce dont vous avez besoin.

var user_inputs = ['line1', 'line2']; 
var inputs = user_inputs.map(function(user_input, idx){ 
    return <div key={idx}>{user_input}</div> 
}); 

ReactDOM.render(
    <div className="root">{inputs}</div>, 
    document.getElementById('preview') 
);