javascript - how to interact with unspecified number of react child components -

i've got component can contain number of child components, , want these child components, contain input fields, set input fields "disabled" when state in parent changed. i've been attempting use react.cloneelement react.children.map modify properties of child elements, doesn't seem affecting anything.

here's simplified version:

# parent component # assume there's @setstate call in here somewhere disableableitem = react.createclass   getinitialstate: ->     disabled: false   render: ->     <div>       {         react.children.map @props.children, (child) =>           react.cloneelement child, isdisabled: @state.disabled       }     </div>  # child component parameterizedoption = react.createclass   getinitialstate: ->     disabled: @props.isdisabled   render: ->     <div classname="parameterized-option">       <label>{@props.text}</label>       <div classname="input-group input-group-sm">         <input type={@props.inputtype or "text"} classname="form-control"           placeholder={@props.initialinput or "00.00"}           disabled={@state.disabled}></input>       </div>     </div> 

and rendering like:

react.render <disableableitem>     <parameterizedoption text="hey" isdisabled=false />     <parameterizedoption text="hey" isdisabled=false />   </disableableitem>, document.body 

so i'm console.logging output, , state in parent getting modified when want to, children's props not getting modified thought react.cloneelement call modify them (they're false @ start). i've taken @ these questions, don't think apply, since disableableitem doesn't know children until they're given in call react.render, can't put disabled={@state.disabled} 1 of children's properties.

how reach in , modify these children's state? misunderstanding cloneelement supposed do?

you're copying props state, bad mojo. (https://facebook.github.io/react/tips/props-in-getinitialstate-as-anti-pattern.html)

just bind props.disabled directly element instead of copying on state.

---

your current code:

getinitialstate: ->     disabled: @props.isdisabled 

this work if ensure update state.disabled in componentwillreceiveprops reflect new props.disabled passed in.

if you're deadset on doing weird way: https://jsfiddle.net/1t8ew85x/