React - Change children props recursively

README.md

#Change children props recursively

Sometime, you'd like to update the props of children component pass throught this.props.children recursively. Here is an implementation that does the trick.

Implementation is in the method processChildren() in Parent.jsx. It uses the method generateMergeProps() that give back the props to add according to the type of component.

Use case

The main use for this is creating automated HTML forms. I usualy communicates with JSON with the server (Node.js for example) instead of using native HTTP POST queries. And I wanted a way to automae this. I created a Form component that will take any children, but gives extra props to the children representing input fields (a callback to update its value for example). But those input fiels were not necessary direct children. I needed to go through all children recursively.

Child.jsx

'use strict'

var React = require('react')



var Child = React.createClass({

    render: function()
    {
        var element
        if (this.props.myProp)
        {
            element = <p>{ 'I\'m a child with prop ' + this.props.myProp }</p>
        }
        else
        {
            element = <p>{ 'I\'m a child without prop' }</p>
        }
        return element
    }
})

module.exports = Child

main.js

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var Parent = require('./Parent')
var Child = require('./Child')
var OtherChild = require('./OtherChild')
var UnknownChild = require('./UnknownChild')



ReactDOM.render(
    <Parent>
        <Child />
        <OtherChild />
        <ul>
            <li>Something else</li>
            <li><Child /></li>
        </ul>
        <OtherChild />
        <UnknownChild />
        <Child />
    </Parent>,
    document.getElementById('content')
)

OtherChild.jsx

'use strict'

var React = require('react')



var OtherChild = React.createClass({

    render: function()
    {
        var element
        if (this.props.myProp)
        {
            element = <p>{ 'I\'m an other child with prop ' + this.props.myProp }</p>
        }
        else
        {
            element = <p>{ 'I\'m an other child without prop' }</p>
        }
        return element
    }
})

module.exports = OtherChild

Parent.jsx

'use strict'

var React = require('react')
var Child = require('./Child')
var OtherChild = require('./OtherChild')



const concernedChildTypeList = [ Child, OtherChild ]



var Parent = React.createClass({

    render: function()
    {
        return (
            <div className="parent">
                <h2>Parent</h2>
                { this.processChildren(this) }
            </div>
        )
    },



    generateMergeProps: function(element)
    {
        for (var i = 0; i < concernedChildTypeList.length; ++i)
        {
            if (element.type === concernedChildTypeList[i])
            {
                return {
                    myProp: 'Added by Parent'
                }
            }
        }
        return {}
    },



    processChildren: function(element)
    {
        console.log(element)
        if (React.Children.count(element.props.children) === 0)
        {
            return []
        }
        else
        {
            return React.Children.map(element.props.children, function(child)
            {
                if (child.props === undefined)
                {
                    return child
                }
                else if (React.Children.count(child.props.children) === 0)
                {
                    return React.cloneElement(child, this.generateMergeProps(child))
                }
                else
                {
                    return React.cloneElement(child, this.generateMergeProps(child), this.processChildren(child))
                }
            }.bind(this))
        }
    }
})

module.exports = Parent

UnknownChild.jsx

'use strict'

var React = require('react')



var UnknownChild = React.createClass({

    render: function()
    {
        var element
        if (this.props.myProp)
        {
            element = <p>{ 'I\'m an unknown child with prop ' + this.props.myProp }</p>
        }
        else
        {
            element = <p>{ 'I\'m an unknown child without prop' }</p>
        }
        return element
    }
})

module.exports = UnknownChild