how add item in the "todo app" without page refresh from api in react


enter image description here

I want to add an item on the list from the API without page reload in react js. currently, it works with a page refresh. I have tried with conditional rendering but was unable to make can I make it? when the user click on add button it should instantly add onto the list

here is my code:

import "./App.css";
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
  const [todo, setTodo] = useState([]);

  const [inputText, setInputText] = useState({
    id: "",
    title: "",

  function handleChange(e) {
  const [status, setStatus] = useState(false);
  async function addItem(e) {
    await"http://localhost:3333/todos", inputText);

  async function getTodo() {
    try {
      const todo = await axios.get("http://localhost:3333/todos");

      // console.log(
    } catch (error) {
      console.log("something is wrong");

  useEffect(() => {
    // Update the document title using the browser API
  }, []);

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>

      <div className="form">
        <input onChange={handleChange} type="text" name="title" />
        <button onClick={addItem}>
        <ul className="user">
          { => {
            const { id, title } = todos;
            return <li key={id}>{title}</li>;

export default App;

>Solution :

After creating todo with, axios will return a response object and the newly created todo data object:

  async function addItem(e) {

    const res = await"http://localhost:3333/todos", inputText);

    console.log("response:", res) // you can log out the res and see the returned data

    setTodo([, ...todo]) // Push to the front of existing todo list


Leave a ReplyCancel reply