DBC22-915: support for html tags in camera caption

bcgov · Nov 16, 2023 · 0e5e7a5 · 0e5e7a5
1 parent 2d224df
commit 0e5e7a5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js
@@ -5,6 +5,7 @@ import React from 'react';
 import Button from 'react-bootstrap/Button';
 import EventTypeIcon from '../EventTypeIcon';
 import FriendlyTime from '../FriendlyTime';
+import parse from 'html-react-parser';
 
 function convertDirection(direction) {
   switch (direction) {
@@ -55,7 +56,7 @@ export function getCamPopup(camFeature, setClickedCamera, navigate) {
         </div>
 
         <div className="popup__description">
-          <p>{camData.caption}</p>
+          <p>{parse(camData.caption)}</p>
           <div className="camera-image">
             <img src={camData.links.imageSource} width='300' />
 

diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
@@ -23,6 +23,7 @@ import Tab from 'react-bootstrap/Tab';
 import Tabs from 'react-bootstrap/Tabs';
 import Button from 'react-bootstrap/Button';
 import ImageGallery from 'react-image-gallery';
+import parse from 'html-react-parser';
 import RangeSlider from 'react-bootstrap-range-slider';
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 
@@ -202,7 +203,7 @@ export default function CameraDetailsPage() {
             <div className="camera-details">
               <div className="camera-details__description">
                 <h2>{camera.name}</h2>
-                <p className="body--large">{camera.caption}</p>
+                <p className="body--large">{parse(camera.caption)}</p>
               </div>
               <div className="camera-details__more">
                 <div className="camera-details__more__hwy">