title: How to fetch API in React JS and save the data to MongoDB
body: <p>I try to fetch an API and save the data to MongoDB, but i think i have some problem with my POST method..
  I would like to store the data what i fetch from the API and then if i change data in the front i would like if it changed in the database
  Here is my code snippet:</p>
  
  <p>App.js file</p>
  
  <pre><code>class App extends React.Component {
    state = {
      name: "",
      movie: [],
    };
  
    componentDidMount = () =&gt; {
      this.getMovie();
      this.displayMovie();
    };
  
    getMovie = () =&gt; {
      axios.get("http://api.tvmaze.com/shows?page=1").then((response) =&gt; {
        const data = response.data;
        this.setState({
          movie: data,
        });
        console.log("Data has been received");
        console.log(this.state.movie);
      });
    };
    displayMovie = () =&gt; {
      axios({
        url: "/",
        method: "POST",
        data: this.state.movie,
      })
        .then(() =&gt; {
          console.log("Data has been sent to the server");
          this.getMovie();
        })
        .catch((err) =&gt; {
          console.log(err);
          console.log("Internal server error");
        });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.displayMovie}&gt;
            &lt;button type="submit"&gt;Send&lt;/button&gt;
            &lt;h2&gt;Movie List&lt;/h2&gt;
            &lt;div&gt;
              {this.state.movie.map((t) =&gt; {
                return &lt;p&gt;{t.name}&lt;/p&gt;;
              })}
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>server.js file</p>
  
  <pre><code>const express = require("express");
  const mongoose = require("mongoose");
  
  const bodyParser = require("body-parser");
  
  const app = express();
  const movieRouter = require("./routes/movie.routes");
  
  const connect = () =&gt; {
    return mongoose
      .connect("mongodb://localhost:27017/movie", {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      })
      .then(() =&gt; console.log("db connected"))
      .catch((err) =&gt; console.log(err));
  };
  
  connect();
  
  app.use(express.json());
  app.use("/", movieRouter);
  
  app.use(bodyParser.json({ limit: "50mb", extended: true }));
  app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));
  
  app.listen(5000, () =&gt; {
    console.log("app is running on 5000");
  });
  </code></pre>
  
  <p>model Schema</p>
  
  <pre><code>const mongoose = require("mongoose");
  
  const movieSchema = new mongoose.Schema({
    name: {
      type: String,
    },
  });
  
  const MovieSchema = mongoose.model("movieSchema", movieSchema);
  module.exports = MovieSchema;
  
  </code></pre>
  
  <p>service js file</p>
  
  <pre><code>const MovieSchema = require("../models/movie.models");
  
  const getMovie = async () =&gt; {
    const movie = await MovieSchema.find();
    return movie;
  };
  
  module.exports = {
    getMovie,
  };
  
  </code></pre>
  
  <p>controller file</p>
  
  <pre><code>
  const getMovie = async (req, res, next) =&gt; {
    try {
      const movie = await movieService.getMovie();
      res.status(200).json({ result: movie });
    } catch (err) {
      next(err);
    }
  };
  
  module.exports = {
    getMovie,
  };
  
  
  </code></pre>
  
  <p>router file</p>
  
  <pre><code>const express = require("express");
  const router = express.Router();
  const movieController = require("../controllers/movie.controllers");
  
  router.get("/", movieController.getMovie);
  
  module.exports = router;
  
  </code></pre>
  
  <p>What am i doing wrong ? I have POST <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a> 404 (Not Found) error message.</p>
  
  <p>Thank you for help!</p>