@@ -9,9 +9,9 @@ type Props = {
99
1010const MAX_VISIBLE_GUIDES = 4
1111export const LearningTrack = ( { track } : Props ) => {
12- const [ visibleGuides , setVisibleGuides ] = useState ( track . guides ?. slice ( 0 , 4 ) )
12+ const [ visibleGuides , setVisibleGuides ] = useState ( track ? .guides ?. slice ( 0 , 4 ) )
1313 const showAll = ( ) => {
14- setVisibleGuides ( track . guides )
14+ setVisibleGuides ( track ? .guides )
1515 }
1616 const { t } = useTranslation ( 'product_sublanding' )
1717
@@ -21,16 +21,16 @@ export const LearningTrack = ({ track }: Props) => {
2121 < div className = "Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap" >
2222 < div className = "d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8" >
2323 < div className = "my-xl-0 mr-xl-3" >
24- < h5 className = "mb-3 color-text-inverse font-mktg h3-mktg " > { track . title } </ h5 >
24+ < h5 className = "mb-3 color-text-inverse font-mktg h3-mktg " > { track ? .title } </ h5 >
2525 < p className = "color-text-inverse truncate-overflow-3 learning-track--description" >
26- { track . description }
26+ { track ? .description }
2727 </ p >
2828 </ div >
2929 </ div >
3030 < a
3131 className = "d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0"
3232 role = "button"
33- href = { `${ track . guides && track . guides [ 0 ] . href } ?learn=${ track . trackName } ` }
33+ href = { `${ track ? .guides && track ? .guides [ 0 ] . href } ?learn=${ track ? .trackName } ` }
3434 >
3535 { t ( 'start' ) }
3636 < span className = "mr-2" >
@@ -42,10 +42,10 @@ export const LearningTrack = ({ track }: Props) => {
4242 < div >
4343 < a
4444 className = "Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
45- href = { `${ guide . href } ?learn=${ track . trackName } ` }
45+ href = { `${ guide . href } ?learn=${ track ? .trackName } ` }
4646 >
4747 < div className = "circle color-bg-tertiary d-inline-flex mr-4" >
48- { track . guides && (
48+ { track ? .guides && (
4949 < span className = "m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text" >
5050 { track . guides ?. indexOf ( guide ) + 1 }
5151 </ span >
@@ -56,7 +56,7 @@ export const LearningTrack = ({ track }: Props) => {
5656 { t ( 'guide_types' ) [ guide . page . type ] }
5757 </ div >
5858 </ a >
59- { track . guides && track . guides ?. indexOf ( guide ) + 1 === MAX_VISIBLE_GUIDES ? (
59+ { track ? .guides && track ? .guides ?. indexOf ( guide ) + 1 === MAX_VISIBLE_GUIDES ? (
6060 < button
6161 className = "Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
6262 onClick = { showAll }
@@ -66,7 +66,7 @@ export const LearningTrack = ({ track }: Props) => {
6666 style = { { bottom : '50px' } }
6767 > </ div >
6868 < span >
69- Show { track . guides ?. length - MAX_VISIBLE_GUIDES } { t ( `more_guides` ) }
69+ Show { track ? .guides ?. length - MAX_VISIBLE_GUIDES } { t ( `more_guides` ) }
7070 </ span >
7171 </ button >
7272 ) : (
0 commit comments