Skip to content

Instantly share code, notes, and snippets.

@chrisui
Created May 19, 2016 13:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisui/45a0b05e55eabd968663276ffab522ea to your computer and use it in GitHub Desktop.
Save chrisui/45a0b05e55eabd968663276ffab522ea to your computer and use it in GitHub Desktop.
Clone `children` to pass extra props
// container component
class HandlerA {
handleSubmit(event) {
// do stuff
}
render() {
const {
children // react-router passes your child in here
} = this.props;
return (
<form onSubmit={this.handleSubmit}>
{React.cloneElement(children, {onSubmit: this.handleSubmit})}
</form>
)
}
}
// a child to be rendered into ComponentA via routes
class ComponentB {
render() {
return (
<fieldset>
<input type="text" />
<button>Submit</button> // The button will still submit the form
</fieldset>
)
}
}
// a child to be rendered into ComponentA via routes
class ComponentC {
render() {
const {onSubmit} = this.props; // we can access the props passed by our parent
return (
<fieldset>
<input type="text" />
<div onClick={onSubmit}> /* Some other fancy thing we want to use to submit */
Stuff
</div>
</fieldset>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment