diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js index c7847176eb07db927e9e4acaf27bec7113e98c1d..4fed44aa952a69ebabc8fc00bd70eaf29c45258b 100644 --- a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js +++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js @@ -6,16 +6,35 @@ const Meta = ({ question, answer }) => { return ( <div> <h5>{question}</h5> - <p>{answer}</p> + <p dangerouslySetInnerHTML={{ __html: answer }} /> </div> ) } const Response = ({question, answer}) => { + // array that doesn't contain HTML + if (Array.isArray(answer) && !answer[0].startsWith('<')) { + return ( + <section> + <h4>{question}</h4> + <ul>{answer.map((a) => <li key={a}>{a}</li>)}</ul> + </section> + ) + // array that contains HTML + } else if (Array.isArray(answer)) { + return ( + <section> + <h4>{question}</h4> + {answer.map(a => <div dangerouslySetInnerHTML={{ __html: a }} />)} + </section> + ) + } + + // strings with and without HTML return ( <section> <h4>{question}</h4> - <p>{answer}</p> + <p dangerouslySetInnerHTML={{ __html: answer }} /> </section> ) } @@ -35,8 +54,8 @@ export default class ApplicationDisplay extends Component { </div> <div className="rich-text rich-text--answers"> - {responses.map(response => ( - <Response question={response.question} answer={response.answer} /> + {responses.map(response => ( + <Response question={response.question} answer={response.answer} /> ))} </div> </div> diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js index e04a9cbd32f24751441db3ede282486c5a9c5883..d5dbbfc41abe1803c00253dda3a0cee5954958b5 100644 --- a/opentech/static_src/src/app/src/components/DisplayPanel/index.js +++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js @@ -26,7 +26,7 @@ const DisplayPanel = () => { answer: ['One', 'Two', 'Three', 'Four', 'Five'] }, { question: 'Have you ever applied to or received funding as an OTF project?', - answer: ['<p>One</p>', '<b>Two</b>'] + answer: ['<p>One</p>', '<p><b>Two</b></p>', '<p>Three</p>'] }] }