Question RE Using React Class Fields with Async/Await on Arrow Functions - reactjs

Question

When using React's Class Fields syntax, how can I use async/await and try/catch on arrow functions for my "events" (markComplete, addTodo)?
Would it better to just use a constructor and bind the custom methods in there than using class fields and arrow functions?
class App extends Component {
state = {
todos: [],
};
// async/await here, I understand
async componentDidMount() {
try {
const res = await axios.get(
'http://jsonplaceholder.typicode.com/todos?_limit=10'
);
const data = await res.data;
this.setState({
todos: data,
});
} catch (err) {
console.error(err);
}
}
// Q: how can I use async/await and try/catch here?
markComplete = id => {
this.setState({
todos: this.state.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed;
}
return todo;
}),
});
};
// Q: how can I use async await and try/catch here?
addTodo = title => {
axios
.post('http://jsonplaceholder.typicode.com/todos', {
title,
completed: false,
})
.then(res =>
this.setState({
todos: [...this.state.todos, res.data],
})
);
};
render() {
return (
<Router>...</Router>
);
}
}
export default App;

Answer 1

You can make the arrow function async as well.
addTodo = async title => {
try {
await axios.post('http://jsonplaceholder.typicode.com/todos', { title, completed: false, })
.then(res => this.setState({ todos: [...this.state.todos, res.data] }));
} catch(err) {
// Handle err
}
};
What you have with the returned promise from axios is fine, you can add a catch block to the promise chain.
addTodo = async title => {
await axios.post(
'http://jsonplaceholder.typicode.com/todos',
{ title, completed: false, }
)
.then(res => this.setState({ todos: [...this.state.todos, res.data] }))
.catch(err => {
// Handle err
});
};