child.jsx

// react component used to create sweet alerts
import SweetAlert from "react-bootstrap-sweetalert";


class CreateFolder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      alert: null,
      show: false
    };
    this.hideAlert = this.hideAlert.bind(this);
    this.inputConfirmAlert = this.inputConfirmAlert.bind(this);
  }
  // to stop the warning of calling setState of unmounted component
  componentWillUnmount() {
    var id = window.setTimeout(null, 0);
    while (id--) {
      window.clearTimeout(id);
    }
  }

  inputAlert() {
    this.setState({
      alert: (
        <SweetAlert
          input
          showCancel
          validationMsg="Please enter a name for this folder"
          style={{ display: "block", marginTop: "-100px" }}
          title={<span className="createTitle">Create a folder</span>}
          onConfirm={e => this.inputConfirmAlert(e)}
          onCancel={() => this.hideAlert()}
          confirmBtnBsStyle="primary"
          cancelBtnBsStyle="secondary"
        >
          Please create a folder name
        </SweetAlert>
      )
    });
  }
  inputConfirmAlert(e) {
    this.setState({ alert: e });
    setTimeout(this.inputConfirmAlertNext, 200);
    this.props.create();
  }
  hideAlert() {
    this.setState({
      alert: null
    });
  }
  render() {
    return (
      <>
        {this.state.alert}
        <Button className="btn-round btn btn-secondary" onClick={this.inputAlert.bind(this)}>
          NEW FOLDER
        </Button>
      </>
    );
  }
}

export default CreateFolder;

parent.jsx

type RouteProps = RouteComponentProps;

interface Props extends RouteProps, IProjectActions {
  props: AuthorizedProjectViewModel;
  projects: AuthorizedProjectViewModel[];
}

class Projects extends React.Component<Props> {
  componentDidMount() {
    this.props.fetchProjects();
  }

  newProject = () => {
    console.log("new project");
    const project: Project = { name: "new" };
    this.props.createProject(project);
  };


  render() {
    const path = this.props.location.pathname;
    const split = path.split("/");

    const { projects } = this.props;
    const root = this.props.match.path;

    return (
      <>
        <div className="content">
          <div className="subHeader">
            <div className="one">
              {split.map((item, i) =>
                i === split.length - 1 ? (
                  <p className="paths">
                    {" "}
                    <span> {item}</span>
                  </p>
                ) : (
                  <p className="paths"> {item} /</p>
                )
              )}
            </div>
            <div className="two">
              <CreateFolder create={this.newProject} />
              <button className="btn-round btn btn-primary">UPLOAD</button>
            </div>
          </div>

          <Row>
            <Col xs={12} md={12}>
              {this.props.location.pathname === "/admin/projects" && (
                <>
                  <table className="table-header">
                    <tr className="gray">
                      <td className="header forty">
                        Project <i className="fas fa-sort" />
                      </td>
                      <td className="header thirty">
                        Client <i className="fas fa-sort" />
                      </td>
                      <td className="header ten">
                        Type <i className="fas fa-sort" />
                      </td>
                      <td className="header twenty"> </td>
                    </tr>
                  </table>
                  <Card>
                    <CardBody className="card-height">
                      {projects.map(project => (
                        <SingleProject project={project} />
                      ))}
                    </CardBody>
                  </Card>
                </>
              )}

              <Route path={`${root}/:id/:folder`} component={ProjectProfile} />
              <Route exact path={`${root}/:id/`} component={ProjectProfile} />

              {/* <Route exact path={`${this.props.match.path}/:id`} component={ProjectProfile} />
              <Route exact path={`${this.props.match.url}/:id`} component={FolderInside} />
                      <Route exact path={`${this.props.match.path}/:id/:name`} component={FolderInside} /> */}

              {/* get this current route plus the pathname of each projectname  */}
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default connect(
  projectSelector,
  DispatchProject
)(Projects);