Почему forEach показывает дублированный вывод?(Метод React.Children.forEach)

Question

У меня есть этот код, который показывает мне текст в консоли дважды.Зачем?

const { Children } = React
const { render } = ReactDOM

const Display = ({children}) => Children.forEach(children, child => 
      console.log(child.props.children))

render(
    <Display> 
         <h1>Child 1</h1> 
         <h1>Child 2</h1> 
         <h1>Child 3</h1> 
    </Display>
, document.getElementById('react-container'))

Консоль показывает это: Ребенок 1 Ребенок 2 Ребенок 3 Ребенок 1 Ребенок 2 Ребенок 3

Answer 1

Нет верного значения от Display, что привело к неожиданному поведению от ReactDom.render.Добавьте return null в Display.