DeveloperBreeze

Javascript Frontend Development Tutorials, Guides & Insights

Unlock 1+ expert-curated javascript frontend tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your javascript frontend skills on DeveloperBreeze.

How to Build a Fullstack App with Flask and React

Tutorial September 30, 2024
javascript python

Add a simple form to create new tasks. Create a new component TaskForm.js:

import React, { useState } from 'react';
import axios from 'axios';

function TaskForm({ onTaskCreated }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('http://127.0.0.1:5000/tasks', { title, description, done: false })
      .then(response => {
        onTaskCreated(response.data);
        setTitle('');
        setDescription('');
      })
      .catch(error => console.log(error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Title</label>
        <input type="text" value={title} onChange={e => setTitle(e.target.value)} />
      </div>
      <div>
        <label>Description</label>
        <input type="text" value={description} onChange={e => setDescription(e.target.value)} />
      </div>
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;

Read More