Merging styles onto children props

(not my actual use case, just a sample of the problem)

Given the view

render(){
  <View>
     {this.mapChildren(this.props.children)}
  </View>
}
mapChildren(children){
  return children.map((child) => {
    var styles = Object.assign(child.props.style, {opacity:0}) // child.props.style contains an int (e.g 34)
    return React.cloneElement(child, {styles})
  })
}

I need to iterate through the children, attributing to each of them the style {opacity:0}, and merging with any existing styles, however the content of child.props.style is an int instead of an object that can be merged.

Given this, my only option is to accept styles through a prop on the parent object, and map them to the children with their keys, this is obviously not a desirable solution. Am I missing something, or is this use case not intended to be supported? For the record, my use case is a waterfall view, where i need to render the elements and then rearrange them after I know their sizes, but i imagine this applies to more use cases

[vjeux]

As a general rule, you don’t want to mutate anything, what you want is to make a new object that has the old and new.

In your case you can do

var style = [child.props.style, { opacity: 0 }];
React.cloneElement(child, {style})

[x5engine]

how is @JohnyDays doing?

and @brentvatne cats are smarter than dogs :p