How to send a value to database using axios and native php as its backend

Question

Im trying to make this todolist app using react, axios and php as API. The read function works perfectly. However, when I try to send the data into the database, it always give '' even though it work properly when I tried without react.

This is the php code

include 'config.php';

$content = mysqli_real_escape_string($kon, $_POST['content']);
$sql = mysqli_query($kon, "insert into note (content) values ('$content');");

and this are the form react code

const[list, setList] = useState('')
const handleSubmit = (e) =>{
      e.preventDefault();
      console.log(list)
      axios
      .post('http://localhost:8080/todolist/add.php', {
        content: list,
      })
      .then(res =>{
        console.log(list);
      })
    }

<Form onSubmit = {handleSubmit}>
          <Form.Group className="mb-3" style={{ width: '27rem' }}>
            <Form.Control type="text" onChange={ (e) => setList(e.target.value)} name="content" placeholder="What Do You Want to Do Today?"/>
          </Form.Group>
          <Button variant="primary" type="submit"> + </Button>
        </Form>

Is there anything I miss or code wrong? Thank You

Answer 1

it's was unclear it always give what? however when you use e.preventDefault(); it prevent the default behaviour "submit data by html form" so you won't submit by the form, in this case you can use onClick

 <Form>
        <Form.Group className="mb-3" style={{ width: '27rem' }}>
          <Form.Control 
               type="text" 
               onChange={ (e) => setList(e.target.value)}
               name="content"
               value={list}
               placeholder="What Do You Want to Do Today?"
          />
        </Form.Group>
     <Button variant="primary" onClick ={handleSubmit}> + </Button>
 </Form>