[Children] filter null values in map function

Currently I am implementing some Dropdown component and I have something like this.

return (
  <div className={classnames(classes)} tabIndex="-1">
    {Children.map(children, this.render_child)}
  </div>
)

...

@autobind
render_child(element, index) {
  return cloneElement(element, {
    key: element.key || index,
    selected: this.props.selected,
    onClick: this.click_handler
  })
}

The business requirement put me in this situation. I created the list of item of the Dropdown component.

// this is using map from some array so I will return an array.
render_menu_item(key) {
  if(!key) { //whatever checking
    return
  }

  return (
    <MenuItem value={key}>{text}</MenuItem>
  )
}

Now, because I use element.key in some case element could be null so give me an error. I propose to remove the null or undefined from the Children.map because then I will be filtering all the time the null values whenever I have this situation.

I understand I can forEach but I think is not the best implementation, in the end you change the map function alright so

[sophiebits]

The new toArray removes nulls, btw.

[yordis]

@jimfb can you put me an example when the user want to have null? because people used a lot the null value for render nothing in some function base on some condition, the null or undefined values doesn’t add any value to the render, no?

Children is DOM/React element so I don’t see the problem with removing it by default like the react-dom does when you try to render a null value