Estoy tratando de obtener el backend app.js (express.js) del 'método Get' para alinear el componente/Display.js en la aplicación react crud. Hasta ahora, add.js se alinea bien y actualiza el archivo data.json para que funcione el crud, pero ahora quiero que muestre la nueva entrada. El proyecto es para la escuela, tenemos que usar react crud y 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) }) });

componente/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;

Estoy tratando de hacer que Display.js muestre la nueva entrada del archivo data.json. El archivo data.json se actualiza con el archivo app.js que usa el método de publicación en el backend express y se alinea bien con el archivo Add.js en el directorio componente/Add.js.