import { messages } from 'cucumber-messages'
import React from 'react'
import Feature from './Feature'

interface IProps {
  gherkinDocument: messages.IGherkinDocument
}

const GherkinDocument: React.FunctionComponent<IProps> = ({
                                                            gherkinDocument,
                                                          }) => {
  return (
    gherkinDocument.feature ? <Feature feature={gherkinDocument.feature}/> : null
  )
}

export default GherkinDocument

import { messages } from 'cucumber-messages'
import React from 'react'
import Feature from './Feature'

interface IProps {
  gherkinDocument: messages.IGherkinDocument
}

const GherkinDocument: React.FunctionComponent<IProps> = ({
                                                            gherkinDocument,
                                                          }) => {
  return (
    gherkinDocument.feature && <Feature feature={gherkinDocument.feature}/>
  )
}

export default GherkinDocument

--- 
+++ 
@@ -10,7 +10,7 @@
                                                             gherkinDocument,
                                                           }) => {
   return (
-    gherkinDocument.feature && <Feature feature={gherkinDocument.feature}/>
+    gherkinDocument.feature ? <Feature feature={gherkinDocument.feature}/> : null
   )
 }
 
Return null when there is no feature
