onSubmit not working with react-bootstrap Form

Question

I have a Navbar which a form inside. I'm looking to sent all my data onSubmit to my firebase real time database. But when I bind my onSubmit function nothing at all its working. My Button, or my Form (I'm not sure) doesn't detect any action onSubmit

I try to put my onSubmit field directly in my Button, same result, nothing it's working. I try to add a console.log in my handleSubmit function to see if it's working when I click on my Button, and nothing happened. My console stay empty. I also put my Form out of my navbar just to make the test. Same result, not working.

Do someone have any idea happening ? app.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sheetLoaded: false,
      isNotClicked: true,
      isMoreFiltersNotRequired: true,
      handleShopClick: false,
      selectedOption: "option1",
      cabinePhoto: false,
      bornePhoto: false,
      helioBooth: false,
      filteredResults: [],
      filteredResultsLength: 0,
      rating: 5,
      shops: [],
      loading: true,
      zip_code: "",
      searchResult:""
    };
    //To resolve clone App error when we are initializing App

    if (!firebase.apps.length) {
      firebase.initializeApp(config);
    }
  }

  checkLoading = () => {
    if (this.state.loading === true) {
      console.log("loading...");
    } else if (this.state.loading === false) {
      console.log("Finish load");
    }
  };

  getUserData = () => {
    let ref = firebase.database().ref("shops");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      this.setState({
        shops: state,
        loading: false
      });
    });
  };

  componentWillMount() {
    this.checkLoading();
    this.getUserData();
  }

  handleChanges = e => {
    const input = e.currentTarget;
    const name = input.name;
    const value = input.type === "checkbox" ? input.checked : input.value;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) =>{
    console.log('search clicked')
    e.preventDefault();
    const itemsRef = firebase.database().ref('search');
    const result = {
      zip_code: this.state.zip_code,
      selectedOption: this.state.selectedOption
    }
    itemsRef.push(result);
    this.setState({
      zip_code: '',
      selectedOption: ''
    });
  }

app.js

[..........]

  render() {
    return (
      <Router>
          <HeaderFilters
            wrapperHeaderFunction={this.wrapperHeaderFunction}
            zip_code={this.state.zip_code}
            handleChanges={this.handleChanges}
            handleSubmit={this.handleSubmit}
            isClicked={this.isClicked}
            filterClick={this.filterClick}
            selectedOption={this.state.selectedOption}
            moreFilterClick={this.moreFilterClick}
            filteredResults={this.state.filteredResults}
            rating={this.state.rating}
            startDate={this.state.startDate} // momentPropTypes.momentObj or null,
            startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
            endDate={this.state.endDate} // momentPropTypes.momentObj or null,
            endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
            onDatesChange={({ startDate, endDate }) =>
              this.setState({ startDate, endDate })
            } // PropTypes.func.isRequired,
            focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
            onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
      />

[.......]

Navbar Component

class HeaderFilters extends Component {
  state = {};

  render() {
    return (
      <React.Fragment>
        <Navbar id="navbar" className="bg-light">
          <Link to='/'><Navbar.Brand href="#home">Comparator-Booth</Navbar.Brand></Link>
          <Form inline onSubmit={this.props.handleSubmit}>
            {["radio"].map(type => (
              <React.Fragment key={`custom-inline-${type}`}>
                <Form.Check
                  custom
                  inline
                  label="Particuliers"
                  type={type}
                  id={`custom-inline-${type}-1`}
                  jsname="wCJL8"
                  name="selectedOption"
                  value="particuliers"
                  checked={this.props.selectedOption === "particuliers"}
                  onChange={this.props.handleChanges}
                />
                <Form.Check
                  custom
                  inline
                  label="Pros"
                  type={type}
                  id={`custom-inline-${type}-2`}
                  name="selectedOption"
                  value="pros"
                  checked={this.props.selectedOption === "pros"}
                  onChange={this.props.handleChanges}
                />
              </React.Fragment>
            ))}
          </Form>
          &nbsp;
          <Form inline>
            <FormControl
              placeholder="Code postal"
              aria-label="Code postal"
              aria-describedby="basic-addon1"
              type="text"
              name="zip_code"
              value={this.props.zip_code}
              onChange={this.props.handleChanges}
            />
            &nbsp;
            <DateRangePicker
              startDate={this.state.startDate} // momentPropTypes.momentObj or null,
              startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
              endDate={this.state.endDate} // momentPropTypes.momentObj or null,
              endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
              onDatesChange={({ startDate, endDate }) =>
                this.setState({ startDate, endDate })
              } // PropTypes.func.isRequired,
              focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
              onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
              displayFormat={() => moment.localeData("fr").longDateFormat("L")}
            />
            &nbsp;
            <Button type="submit"variant="success" onClick={this.props.filterClick} ><Link to = "/search" >Recherche !</Link></Button> &nbsp;

            <Button variant="primary" onClick={this.props.moreFilterClick}>
              Plus de filtres !
            </Button>
          </Form>
        </Navbar>
      </React.Fragment>
    );
  }
}

export default HeaderFilters;

Answer 1

Try to bind your submit function

 constructor(props) {
    super(props);
    this.state = {
      sheetLoaded: false,
      isNotClicked: true,
      isMoreFiltersNotRequired: true,
      handleShopClick: false,
      selectedOption: "option1",
      cabinePhoto: false,
      bornePhoto: false,
      helioBooth: false,
      filteredResults: [],
      filteredResultsLength: 0,
      rating: 5,
      shops: [],
      loading: true,
      zip_code: "",
      searchResult:""
    };
    //To resolve clone App error when we are initializing App

    if (!firebase.apps.length) {
      firebase.initializeApp(config);
    }

    this.handleSubmit = this.handleSubmit.bind(this)
  }

Answer 2

Try removing <Link to = "/search" > I think that will prevent click happening in the parent