title: Change the children of a component dynamically in React
body: <p>Is it a way to change the children of a component dynamically? I have a component which wraps other components, recursively walks the children, what I want is to change the text of the childrens that are string. e.g.</p>
  
  <pre><code>render() {
     const func = (node) =&gt; {
      React.Children.forEach(node.children, (childNode) =&gt; {
        if (childNode &amp;&amp; childNode.props &amp;&amp; typeof childNode.props.children === "object") {
          func(childNode.props);
        }
        else if (typeof childNode.props.children === "string"){
          console.log(childNode.props);
        }
      })
    }
  
    func(this.props);
  
    return &lt;span&gt;{ this.props.children }&lt;/span&gt;;
  }
  </code></pre>
  
  <p>Setting childNode.props.children === "something" inside the else is failing, children is read-only.
  Any idea how I can achieve what I want?</p>