fix: Clone only valid react child elements

[superandrew213]

🤔 This is a ...

• New feature
• Bug fix
• Site / document update
• Component style update
• TypeScript definition update
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

👻 What's the background?

React.cloneElement will throw error if child is not a valid element. Child can be void | null | boolean | string | number too. These are not valid react elements.

💡 Solution

Use React.isValidElement(child) to check for valid element before cloning child.

📝 Changelog

No risk or breaking changes.

☑️ Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[netlify]

Deploy preview for ant-design ready!

Built with commit 38e9c06

https://deploy-preview-17207--ant-design.netlify.com

[codecov]

Codecov Report

Merging #17207 into master will decrease coverage by 0.01%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##           master   #17207      +/-   ##
==========================================
- Coverage   95.95%   95.94%   -0.02%     
==========================================
  Files         263      263              
  Lines        7348     7350       +2     
  Branches     2051     2041      -10     
==========================================
+ Hits         7051     7052       +1     
- Misses        295      296       +1     
  Partials        2        2

Impacted Files	Coverage Δ
components/descriptions/index.tsx	97.33% <66.66%> (-1.3%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d65fdac...38e9c06. Read the comment docs.

[afc163]

What the exact problem you meet?

[superandrew213]

@afc163 this won't work at the moment.

const a = false

return (
  <Descriptions title="Title">
    <Descriptions.Item label="Item">{value}</Descriptions.Item>

    {a && (
      <Descriptions.Item label="ConditionalItem">
        {value}
      </Descriptions.Item>
    )}

  </Descriptions>
)

[afc163]

Could you add a test case?