How to call a javascript file in another javascript file React js-CodePudding

I have two React projects, one is Home page and the other one is Date range. Now i want to merge two react project into one. I copied file from one project and pasted into another project. Now how can I call those js function in another js file?

POSTLIST.js

import React, { Component } from "react";
import axios from "axios";
class PostList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
    };
  }
  componentDidMount() {
    axios.get("http://127.0.0.1:8000/last15days").then((response) => {
      this.setState({
        posts: response.data,
      });
      console.log(response.data);
    });
  }
  render() {
    const { posts } = this.state;
    return (
      <div>
        <h1>get call in React js</h1>
        {posts.map((post) => (
          <div key={post.id}>{post.id} </div>
        ))}
      </div>
    );
  }
}
export default PostList;

ABOUT.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
class About extends Component {
  render() {
    return (
      <div>
        {/* <!-- banner --> */}
        <section class="inner-page-banner" id="home"></section>
        {/* <!-- //banner -->
    <!-- page details --> */}
        <div class="breadcrumb-agile">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
              <Link to="/">Home</Link>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
              About Us
            </li>
          </ol>
        </div>
        {/* <!-- //page details -->
        <!--about-mid --> */}
        <section class="banner-bottom py-5" id="exp">
          <div class="container py-md-5">
            <h3 class="heading text-center mb-3 mb-sm-5">About More</h3>
            <div class="row mid-grids mt-lg-5 mt-3">
              <div class="col-md-5 content-w3pvt-img">
                <img src="assets/image/ban1.jpg" alt="" class="img-fluid" />
              </div>
              <h1>TODO : DATERANGE</h1>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default About;

Now i want to call Postlist.js in About.js How to call that function

CodePudding user response：

Well, you don't call these projects. Basically, you wanna have two components of React into one project. In the end of your files, you are exporting your components. This way, you can import that into the main component and call that function. The way you are exporting is the default way, meaning that the export isn't named, i.e., you can import the file in the following syntax:

About.js

import PostList from './PostList.js';
// use <PostList /> anywhere in your code now
// ...

CodePudding user response：

assuming both the files are on the same hierarchy. you need to import POSTLIST.js in ABOUT.js

import PostList from './POSTLIST'