How to call javascript file in anothat javascript file React js-CodePudding

I have two React project one is Home page file and another one is Date range javascript project 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'