Show a random element using a React Component (CoffeeScript)

randomChild.csx.coffee

# COMPONENT

RandomChild = React.createClass

    displayName: "RandomChild"

    getInitialState: -> {
        index: Math.ceil(Math.random() * @props.children.length-1)
    }

    render: ->
        return (
            <div className="show-children-in-sequence-base">
                {@props.children[@state.index]}
            </div>
        )

return RandomChild


# USAGE


<ShowRandomChild>
    <div className="some class">Message 1 content</div>
    <div className="some class">Message 2 content</div>
    <div className="some class">Message 3 content</div>
    <div className="some class">Message 4 content</div>    
</ShowRandomChild>