JSXオブジェクトを返すときに新しい行を追加する

Question

こんにちは私はレンダリングしようとしているデータがあります。 Reactを使用してコンポーネントを返すときに正しくレンダリングする改行を持つことができるようにしたいと思います。今のところ、
、/ nなどの文字列をレンダリングするだけです。自分のデータに改行文字を含めることができますか？そうすれば、データを新しい線が出てくるようにレンダリングすることができますか？

以下のデータ...

const imgPath = '/public/../../../img/'; 

const TempHelpData = [ 
    { 
     name: 'testing', 
     image: `${imgPath}boardAndCant.PNG`, 
     subject: "1. yadda \<br \/> <br /> \n yadda", 
     troubleshoot: "suggestions", 
     video: "no video has been made for this subject"  
    }, 

    { 
     name: 'one', 
     image: `${imgPath}boardAndCant.PNG`, 
     subject: "1. yadda yadda", 
     troubleshoot: "suggestions", 
     video: "no video has been made for this subject" 
    }, 
] 

export default TempHelpData; 

コンポーネントのレンダリング

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 
import TempHelpData from '../data/TempHelpData' 
import sass from '../scss/application.scss' 


class HelpFileContainerRender extends Component { 

    render() { 
     const renderHelpFile = this.props.data.filter(obj => { 

      return this.props.name === obj.name; 
       }).map((obj, idx) => { 
       return (
        <div key={idx}> 
         <div className="divImg"> 
          <img src={`${obj.image}`} className="helpFileImg"></img>< br/> 
         </div> 
         <div> 
          <p> 
           <span>Name:</span> {obj.name} < br/> 
           <span>Subject:</span> {obj.subject} <br /> 
           <span>Troubleshooting:</span> {obj.troubleshoot} <br /> 
           <span>Video:</span> {obj.video} <br /> 
          </p> 
         </div> 
        </div> 
       ); 
     }); 

     return (
      <div> 
       {renderHelpFile} 
      </div> 
     ) 
    } 
} 

class HelpFileContainer extends Component { 
    render() { 
     return (
      <div> 
       <HelpFileContainerRender data={this.props.data} name={this.props.name} /> 
      </div> 
     ) 
    } 
} 

HelpFileContainer.propTypes = { 
    data: PropTypes.arrayOf(
     PropTypes.object 
    ), 
    name: PropTypes.string 
} 

HelpFileContainer.defaultProps = { 
    data: TempHelpData, 
    name: '' 
} 

export default HelpFileContainer; 

Answer 1

代わりの\ nは、あなたがデータで<br />を使用し、dangerouslySetInnerHTML

でJSXにそれを置くことができる使用して

<div dangerouslySetInnerHTML={{__html: 'hello <br /> goodbye' }} />