javascript - Modify React Child Component props after render -

here's simple example:

copybutton = <somereactcomponent title="my button" />  this.clipboard = new clipboard('button#copy-button'); this.clipboard.on('success', () => {      this.copybutton.props.title = "copied!"; });  render = () => {     return (         ...         { this.copybutton }         ...     ); } 

using clipboard.js, when button pressed, copy text clipboard. on successful copy, want change title of copy button reflect that. button component, keep reference to, has been rendered , this.copybutton.props.title doesn't work because components immutable.

how then, go changing value of title on button? know have state property in parent component i'd rather avoid keep parent component complete stateless. reassign this.copybutton inside success callback (i tried no luck)?

speaking more generally, how should parent components update children's props if @ all? using state way?

note: i'm using es6 if matters.

considering you're trying update state of button's text, not using react state in form (in parent or child component) feel bit hacky. however, possible. initial method comes mind use react.cloneelement create new version of copybutton title prop want. use this.forceupdate rerender parent component update child component. this:

this.clipboard.on('success', () => {      this.copybutton = react.cloneelement(this.copybutton, {         title: 'copied!'     });     this.forceupdate(); }); 

https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

that being said, using state in case better both readability , runtime (cloning elements , forcing re-render isn't cheap).