diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx index f3b9e0128d..3043c3602a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx @@ -5,10 +5,10 @@ import { Link } from "react-navi"; import { useStore } from "../../../lib/store"; import { DataField } from "./DataField"; +import { FlagBand, NoFlagBand } from "./FlagBand"; import Hanger from "./Hanger"; import Node from "./Node"; import { Thumbnail } from "./Thumbnail"; -import { FlagBand, NoFlagBand } from "./FlagBand"; const Option: React.FC = (props) => { const childNodes = useStore((state) => state.childNodesOf(props.id)); @@ -20,7 +20,9 @@ const Option: React.FC = (props) => { // Question & Checklist Options set zero or many flag values under "data.flag" if (props.data?.flag) { if (Array.isArray(props.data?.flag)) { - flags = flatFlags.filter(({ value }) => props.data?.flag?.includes(value)); + flags = flatFlags.filter( + ({ value }) => props.data?.flag?.includes(value), + ); } else { flags = flatFlags.filter(({ value }) => props.data?.flag === value); } @@ -46,9 +48,17 @@ const Option: React.FC = (props) => { imageAltText={props.data.text} /> )} - {flags ? flags.map((flag) => ) : } + {flags && flags.length > 0 ? ( + flags.map((flag) => ( + + )) + ) : ( + + )}
{props.data.text}
- {props.data?.val && } + {props.data?.val && ( + + )}
    {childNodes.map((child: any) => (