javascript - reactjs preventDefault() is not preventing the page reload on form submit

Question

EDIT: Events are not working at all, the onSubmit and onChange functions are not being called. I have another reactapp with similar form and onChange and onSubmit works OK there.

I have a form I dont want the page to refresh when I click on submit. I tried using preventDefault() but I didnt work. Even onChange is printing anything on console. This form is not on page, I am using React Router to point to='/new' and component={NewPost} (NewPost is in ./components/posts/form)

./components/posts/form.js:

import React, { Component } from "react";
import { connect } from "react-redux";

class NewPost extends Component {
  state = {
    title: "",
    body: "",
    status: 0,
  };

  onSubmit = (e) => {
    e.preventDefault();
    const post = e;
    console.log(post);
  };

  onChange = (e) => {
    console.log(e.target.value);
    this.setState({
      [e.target.name]: e.target.value,
    });
  };
  render() {
    const { title, body, status } = this.state;
    return (
      <div className="card card-body mt-4 mb-4">
        <h2>New Post</h2>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Title</label>
            <input
              type="text"
              name="title"
              value={title}
              onChange={this.onChange}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <label>Content</label>
            <textarea
              type="text"
              name="body"
              rows="15"
              value={body}
              onChange={this.onChange}
              className="form-control"
            />
          </div>

          <div className="form-group">
            <button className="btn btn-primary" type="submit">
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default NewPost;

App.js:

import React from "react";
import NavBar from "./components/layout/navbar";
import store from "./store";
import { Provider } from "react-redux";
import Dashboard from "./components/posts/dashboard";
import NewPost from "./components/posts/form";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <React.Fragment>
            <div className="container">
              <NavBar />
              <Switch>
                <Route exact path="/" component={Dashboard}></Route>
                <Route exact path="/new" component={NewPost}></Route>
              </Switch>
            </div>
          </React.Fragment>
        </Router>
      </Provider>
    );
  }
}
export default App;

Answer 1

Issue is not related to code. I created new react application and moved all my code now everything is working fine.