child_render.js

  getStyles() {
    return {
      navTabs: {
        cursor: "pointer",
        padding: 14,
        borderRadius: 3,
        color: "black",
        fontWeight: 700,
        textDecoration: "none",
        border: this.props.active ? "3px solid rgb(200,200,200)" : "none",
      },
      tabText: {
        display: "inline-block",
      },
      number: {
        color: "rgb(250,250,250)",
        padding: "3px 6px",
        backgroundColor: "rgb(150,150,150)",
        borderRadius: 2,
        fontWeight: 300,
        display: "inline-block",
        fontSize: 14,
        marginLeft: 7,

      },
    };
  }
  render() {
    const styles = this.getStyles();
    return (
        <Link
          style={styles.navTabs}
          to={this.props.url}>
            <span style={styles.tabText}> {this.props.text} </span>
            {
              this.props.number ?
                <span style={styles.number}> {this.props.number} </span> :
                ""
            }
        </Link>
    );
  }
}

parent_render.js

  render() {
    const styles = this.getStyles();
    return (
      <div>
        <Flex
          wrap="wrap"
          justifyContent="space-between"
          styleOverrides={styles.navContainer}>
          <NavTab
            active={this.props.routes[3].path ? false : true}
            url={`/m/${this.props.params.conversation_id}/comments/`}
            text="Unmoderated"
            number={
              this.props.unmoderated.unmoderated_comments ?
                this.props.unmoderated.unmoderated_comments.length :
                "..."
              }/>
          <NavTab
            active={this.props.routes[3].path === "accepted"}
            url={`/m/${this.props.params.conversation_id}/comments/accepted`}
            text="Accepted"
            number={
              this.props.accepted.accepted_comments ?
                this.props.accepted.accepted_comments.length :
                "..."
              }/>
          <NavTab
            active={this.props.routes[3].path === "rejected"}
            url={`/m/${this.props.params.conversation_id}/comments/rejected`}
            text="Rejected"
            number={
              this.props.rejected.rejected_comments ?
                this.props.rejected.rejected_comments.length :
                "..."
              }/>
          <NavTab
            active={this.props.routes[3].path === "seed"}
            url={`/m/${this.props.params.conversation_id}/comments/seed`}
            text="Seed"/>
          <NavTab
            active={this.props.routes[3].path === "seed_tweet"}
            url={`/m/${this.props.params.conversation_id}/comments/seed_tweet`}
            text="Seed Tweet"/>
        </Flex>
        {this.props.children}
      </div>
    );
  }