i cant get my bug report to work with trello by api

[Kevin Ponsen]

i cant figure it out whats wrong



this is my typescript code

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

const BugReportPage = () => {
const [bugDetails, setBugDetails] = useState({
email: '',
description: '',
});

const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setBugDetails({
...bugDetails,
[name]: value,
});
};

const submitBugReport = async () => {
const apiKey = 'apikey'; // Replace with your new API key
const token = 'secretkey'; // Replace with the new token you generate
const boardId = 'boardid';

const url = `https://api.trello.com/1/cards?key=${apiKey}&token=${token}&idList=${boardId}`;

try {
const response = await axios.post(url, bugDetails);
console.log('Bug report submitted successfully:', response.data);
// Optionally, reset the form or show a success message
} catch (error) {
console.error('Error submitting bug report:', error);
// Handle error, show an error message, etc.
}
};

const handleSubmit = (e: FormEvent) => {
e.preventDefault();
submitBugReport();
};

return (
<div>
<h1>Bug Report Page</h1>
<form onSubmit={handleSubmit}>
<label>Email:</label><br />
<input
type="email"
name="email"
value={bugDetails.email}
onChange={handleInputChange}
required
/>

<br /><label>Bug Description:</label><br />
<textarea
name="description"
value={bugDetails.description}
onChange={handleInputChange}
required
/>

<button type="submit">Submit Bug Report</button>
</form>
</div>
);
};

export default BugReportPage;

after submit i get this error

i hope someone can give me a headsup whats wrong 

thanks in advance

[Adam Cao]

Two things:

1. You should be targeting a list ID instead of a board ID
2. bugDetails is not the expected format of a Trello card.

Try something like this instead:

const submitBugReport = async () => {
  const apiKey = 'apikey'; // Replace with your new API key
  const token = 'secretkey'; // Replace with the new token you generate
  const listId = 'listId'; // cards go into lists so make sure this is a list id and not a board id

  const url = `https://api.trello.com/1/cards?key=${apiKey}&token=${token}&idList=${listId}`;

  const body = {
    name: `Bug report: ${bugDetails.description}`,
    desc: `From: ${bugDetails.email} \n \n ${bugDetails.description}`
  };

  try {
    const response = await axios.post(url, body);
    console.log('Bug report submitted successfully:', response.data);
  // Optionally, reset the form or show a success message
  } catch (error) {
    console.error('Error submitting bug report:', error);
    // Handle error, show an error message, etc.
  }
};