Don't render hook steps with no content (#361)

Author: davidjgoss

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Fixed
+- Don't render hook steps with no content ([#361](https://github.com/cucumber/react-components/pull/361))
 
 ## [22.3.0] - 2024-08-02
 ### Added

src/components/gherkin/HookSteps.tsx

@@ -10,11 +10,12 @@ interface IProps {
 export const HookSteps: React.FunctionComponent<IProps> = ({ hookSteps }) => {
   return (
     <>
-      {hookSteps.map((step, index) => (
-        <li key={index}>
-          <HookStep key={index} step={step} />
-        </li>
-      ))}
+      {hookSteps
+        .map((step, index) => <HookStep key={index} step={step} />)
+        .filter((el) => !!el.props.children?.length)
+        .map((el, index) => (
+          <li key={index}>{el}</li>
+        ))}
     </>
   )
 }