How do I fix showing database with axios?

Viewed 34

I have a todo list app on React/TypeScript/C#. I have made connection with database with axios. Adding or deleting items on both frontend and backend seems to work fine. But I can not see the text of my todo items, only checkboxes and delete buttons. Here is my code for getting items

const[todos, setTodos] = useState<ToDoData[]>([]);
    useEffect(() => {
        const fetchData = async () => {
            const result = await 
                axios.get("https://localhost:44354/api/ToDoItems")
                  .then(result => setTodos(result.data));

            console.log(data);
        };
        fetchData();

    }, []);    

and adding data

 const addTodo = (title: string) => {
        const newTodo: ToDoData = {
            text: title,
            id: Date.now(),
            completed: false
        }
        setTodos(prev=>[newTodo, ...prev])
 
        const result =
        axios.post('https://localhost:44354/api/ToDoItems',
            {
                Content: title,
                Completed: 0
            }

        )
            .then((response) => { console.log(response) })

            .catch(error => { console.log('the error has occured: ' + error) });
    console.log(result)
}

Also my database fields look like this:

[Required]
        [Key]
        public int Id { get; set; }
       
        [Required]
        [Column(TypeName = "nvarchar(40)")]
        public string Content { get; set; }

        [Required]
        public int Completed { get; set; }

So how to fix data showing in frontend?

Thanks in advance!

0 Answers
Related