<p dir="auto">Currently I am implementing some <code class="notranslate">Dropdown</code> component and I have something like this.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return (
  &lt;div className={classnames(classes)} tabIndex=&quot;-1&quot;&gt;
    {Children.map(children, this.render_child)}
  &lt;/div&gt;
)

...

@autobind
render_child(element, index) {
  return cloneElement(element, {
    key: element.key || index,
    selected: this.props.selected,
    onClick: this.click_handler
  })
}"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classnames</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">tabIndex</span><span class="pl-c1">=</span><span class="pl-s">"-1"</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">render_child</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span>

<span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span>

@<span class="pl-c1">autobind</span>
<span class="pl-en">render_child</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">key</span>: <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">key</span> <span class="pl-c1">||</span> <span class="pl-s1">index</span><span class="pl-kos">,</span>
    <span class="pl-c1">selected</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">selected</span><span class="pl-kos">,</span>
    <span class="pl-c1">onClick</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">click_handler</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">The business requirement put me in this situation. I created the list of item of the <code class="notranslate">Dropdown</code> component.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// this is using map from some array so I will return an array.
render_menu_item(key) {
  if(!key) { //whatever checking
    return
  }

  return (
    &lt;MenuItem value={key}&gt;{text}&lt;/MenuItem&gt;
  )
}"><pre class="notranslate"><span class="pl-c">// this is using map from some array so I will return an array.</span>
<span class="pl-en">render_menu_item</span><span class="pl-kos">(</span><span class="pl-s1">key</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">//whatever checking</span>
    <span class="pl-k">return</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">key</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">text</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MenuItem</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Now, because I use <code class="notranslate">element.key</code> in some case <code class="notranslate">element</code> could be <code class="notranslate">null</code> so give me an error. I propose to remove the <code class="notranslate">null</code> or <code class="notranslate">undefined</code> from the <code class="notranslate">Children.map</code> because then I will be filtering all the time the <code class="notranslate">null</code> values whenever I have this situation.</p>
<p dir="auto">I understand I can <code class="notranslate">forEach</code> but I think is not the best implementation, in the end you change the <code class="notranslate">map</code> function alright so</p>
<p dir="auto">My use case: wrapping all <strong>non-empty</strong> children into divs.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  render() {
    return (
      &lt;div style={rootStyle} onWheel={this.handleWheel}&gt;
        {Children.map(this.props.children, this.wrapChild)}
      &lt;/div&gt;
    );
  },

  wrapChild(child, index) {
    if (!child) { // I know this is probably wrong kind of comparison; don't care
      return (
        &lt;div style={this.getChildStyle(index)}&gt;
          {child}
        &lt;/div&gt;
      );
    }
  },"><pre class="notranslate">  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">rootStyle</span><span class="pl-kos">}</span> <span class="pl-c1">onWheel</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleWheel</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">wrapChild</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-en">wrapChild</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">child</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// I know this is probably wrong kind of comparison; don't care</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">getChildStyle</span><span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-s1">child</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">This is all nice but I also need to know <strong>how many valid children I have wrapped</strong>.<br>
<code class="notranslate">Children.count</code> will return the number of children including the “empty” children. I want to strip them out.</p>
<p dir="auto">Can we have <code class="notranslate">Children.filter</code>?</p>