I'm trying to get the 'Get method' backend app.js (express.js) to align the component/Display.js in the react crud app. So far the add.js aligns fine and updates the data.json file for the crud to work, but now I want it to display the new entry. The project is for school, we have to use react crud and express backend.

//Get
app.get('/api', (req, res) => {
    const { data } = req.body;
    console.log(data);
    fs.readFile(dataPath, 'utf8', (err, data) => {
        if (err) {
            throw err;
        }
        const dataArray = JSON.parse(data)
        const newItem = {
           id : ID,
           title: Title,
           description: Description,
           URL: URL
        }
            res.send(data)
        })
    });

component/Display.js

import React from 'react';

/*The display Component will be called once the submit user 
Component is achieved in input. The state is set to null initially.
*/
class Display extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error:null,
           projects: []
        };
    }

//The data.json file is used for this project it is fetched from the url.
componentDidMount() {
    fetch("/api")
    .then(res => res.json())
    .then(projects => this.setState({projects: projects}, () => console.log(`User fetched ...`, projects)))
    .catch(error => {
        console.log('Error:', error)
        this.setState({error})
    });
}
//Render and return, this will be the jsx that will display the projects.\
render() {
    return(
        <div className="div-Frame">
            <h1>Web Projects</h1>
            <ul className="projectList">
                {this.state.projects.map(project =>
                    <li key={project.id}>
                        <h2>Project {project.id}</h2>
                        <strong>ID:</strong> {project.id} <br/>
                        <strong>Project Title:</strong> {project.title} <br/>
                        <strong>Description:</strong> {project.description} <br/>
                        <strong>URL:</strong> {project.URL}</li>
                        )}
            </ul>
        </div>
    )
}}

export default Display;

I'm trying to get Display.js to show the data.json file's new entry. The data.json is updated with the app.js file which uses the post method in express backend and aligns fine with the Add.js file in the component/Add.js directory.