ReactJS - item doesn't append instantly only refreshing page - node.js

Question

I'm using ReactJS, NodeJS, MongoDB.
In my project I have a Task List and I'm adding new tasks (this works!) but only appends/show that new task when I refresh the page but I'm using ReactJS so I can have a more responsive/interactive website but I'm new at this and I'm still learning and I don't know what to do...Maybe I have to make something with the state?!
Hope you can help me! Thanks!
Here's my NewTask Component:
import React, { Component } from 'react';
import './NewTask.css';
class NewTask extends Component {
constructor(props) {
super(props);
this.state = {
projectId: null,
tasktitle: '',
taskcomment: ''
};
}
postDataHandler = () => {
let data = {
tasktitle: this.state.tasktitle,
taskcomment: this.state.taskcomment
};
fetch(`/dashboard/project/${this.props.projectId}/tasks/newtask`, {
method: 'POST',
data: data,
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => { return response.json() })
.catch(error => console.error('Error:', error));
}
render() {
return (
<div>
<input type='text' className='form-control input--task' required placeholder='Task Title' value={this.state.tasktitle} name='tasktitle' ref='tasktitle' onChange={(event) => this.setState({ tasktitle: event.target.value })} />
<button type='submit' className='btn btn-default button--newtask' value='Submit' onClick={this.postDataHandler}>Add Task</button>
</div>
);
}
}
export default NewTask;
Here's server side to create new task
//Create New Task
exports.create_new_task = (req, res) => {
let projectid = req.params.id;
Task.create({
tasktitle: req.body.tasktitle,
taskcomment: req.body.taskcomment,
project: req.params.id
}, (err, tasks) => {
if (err) {
console.log(err);
}
Project.findById(projectid, (err, project) => {
if(err) {
console.log(err);
}
project.tasks.push(tasks._id);
project.save();
console.log('NEW Task added to project: ' + projectid)
res.json(tasks)
});
});
};
Here's my Tasks Component
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrashAlt, faEdit } from '#fortawesome/free-solid-svg-icons'
import './Tasks.css';
class Tasks extends Component {
constructor(props) {
super(props);
this.state = {
projectId: props._id,
tasks: []
};
}
componentDidMount() {
fetch(`/dashboard/project/${this.props.projectId}/tasks`)
.then(response => {
return response.json()
}).then(task => {
this.setState({
tasks: task.tasks
})
}).catch(error => console.error('Error:', error));
}
render() {
const fontawesomeiconStyle = {
fontSize: '1em',
color: '#8e8359',
textAlign: 'center'
}
const listStyle = {
display:'grid',
gridTemplateColumns:'2fr 1fr',
alignItems: 'center',
justifyItems: 'center'
}
const { tasks } = this.state;
return (
<div>
<ul className="task-list">
{tasks.map(task =>
<li key={task._id} style={listStyle}>{task.tasktitle}
<div>
<form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE&taskId=${task._id}`}>
<button className="button--tasks" >
<FontAwesomeIcon style={fontawesomeiconStyle} icon={faTrashAlt} />
</button>
</form>
</div>
</li>
)}
</ul>
</div>
);
}
}
export default Tasks;
Here's a gif so you can see what's really happening, only appends the
new task when I refresh the page..

Answer 1

You can return a task object from your POST method and then append to the existing task list. Something like this:
postDataHandler = () => {
/* removed for brevity */
.then(response => response.json())
.then(response => {
// append to existing list of tasks
this.props.appendTask(response);
})
.catch(error => console.error('Error:', error));
}
// method in parent component
// passed down through props
appendTask = task => {
let tasks = [...this.state.tasks];
tasks.push(task);
this.setState({tasks});
}
Your list will only re-render when a change in state affects what's being rendered. You either need to re-fetch the full list of tasks or manually append your new task, which is what's being done in the above example.
Here is a more complete example:
class TaskList extends Component {
constructor(props) {
super(props);
this.state = {
tasks: [
{/* task 1 */},
{/* task 2 */}
]
}
}
appendTask = task => {
let tasks = [...this.state.tasks];
tasks.push(task);
this.setState({tasks});
}
render() {
const { tasks } = this.state;
return (
<div className="tasks">
<ul>
{tasks.map(task => <TaskItem task={task}/>)}
</ul>
<NewTask appendTask={this.appendTask}/>
</div>
);
}
}
class NewTask extends Component {
/* ... */
postDataHandler = () => {
/* ... */
.then(response => response.json())
.then(response => {
// append to existing list of tasks
this.props.appendTask(response);
})
.catch(error => console.error('Error:', error));
}
/* ... */
}

Answer 2

After you POST the new item your have to GET the new item as well in your item list component.
You could put both the NewTask and TaskList components in one class component that could perform a GET after the POST promise resolves and update the state with the new item.
Or you could use Redux or another state handler that would use actions that trigger things in the right order.

Answer 3

Look, you're making a POST request to the backend, right?
As it seems, it gets stored correctly, but you're NOT doing anything with it. One way is to do it in a similar fashion as #wdm suggested, or just append the 'task' to your current state using setState, but only if it was posted in the first place, right? :)
Make sure that the response from the backend is the data you posted, use that response and append it to the already existing state using the ... spread operator. The setState will trigger a re-render and you'll have all your tasks listed.