React: map children of ReactDOM.findDOMNode(this)

Question

I want to get the children of ReactDOM.findDOMNode(this) so that I can style based on refs. specifically display none one some refs and yes on others.

I thought I could

blockNode = ReactDOM.findDOMNode(this).children

React.Children.map(blockNode, function(el) {
    console.log('el ',el);
})

error response:

invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

P.S. Also tried wrapping blockNode in createFragment() but no good

Answer 1

I found a workaround for the same functionality. I went about the problem differently and maybe this is more idiomatic react rather than filtering a string or object extensively to turn it into an array which I was going to change based on multiple refs. Considering the mouthful the latter part of that sentence was I am assuming this is the react way to do things.

Instead of on focus and manipulating refs I attached to state and styled inline dynamically by writing toggleDisplay function in my rendering.

credit here

render (){
    var toggleDisplayFocus = function(stateVal) {
    var displayOrNo = stateVal ? "block" : "none";
    return {
       display: displayOrNo
    }
    }

    return (
    <div style={toggleDisplayFocus(this.state.synthFocusDisplay)}>
    contents of div
    </div>
    )
}

P.S. if I am incorrect and there is a really nice way using the react or react-dom API please feel free and I will choose your answer as the best one.