CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-redux
luzny
luzny

Reputation: 2400

How to pass component callback to children element in react-router?

I would like to wrap my current router by Layout with one MapBox and pass to children MapBox callback function:

  <Route path='/posts' component={PostsList} />
    <Route path="/posts/:id" component={Post} >
  </Route>

Currently to handle callback I repeat MapBox on two components:

export default class Post extends React.Component {
  mapMoved(map) {console.log('map moved', map)}
  render() {
    const {post, posts} = this.props;
    return (
      <div>
        {post.title}
        <MapBox mapMoved={::this.mapMoved} posts={posts} />
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  post: state.post,
  posts: state.posts,
});
export default connect(mapStateToProps)(Post);

export default class PostsList extends React.Component {
  renderList() {
    const {posts} = this.props;
  }
  mapMoved(map) {console.log('map moved', map)}
  render() {
    return (
      <div>
        {::this.renderList()}
        <MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  posts: state.posts,
});
export default connect(mapStateToProps)(PostsList);

Desired routes wrapped by Layout:

<Route component={Layout}>
  <Route path='/posts' component={PostsList} />
    <Route path="/posts/:id" component={Post} >
  </Route>
</Route>

Desired Layout component:

export default class Layout extends React.Component {
  mapMoved(map) {}
  render() {
    return (
      <div>
        {this.props.children} //I would like to pass mapMoved callback here
        <MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  posts: state.posts,
});
export default connect(mapStateToProps)(Layout);

I'm using Redux, maybe should I pass somehow callback function trough it?

Upvotes: 0

Views: 951

Answers (1)

deowk
deowk

Reputation: 4318

You can pass props to children like so

export default class Layout extends React.Component {
  mapMoved(map) {}
  render() {
    return (
      <div>
        {React.cloneElement(this.props.children || <div />, {mapMoved: (map) => this.mapMoved(map)})} //I would like to pass mapMoved callback here
        <MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  posts: state.posts,
});

export default connect(mapStateToProps)(Layout);

Upvotes: 1

Related Questions