React .NET - Display data on page from a POST - reactjs

Question

I am working on a calculating application using ASP.NET Core 6 and React 18
in the .NET application, I am using some logic to return some data, the data is not stored in the database, only temporary/mock data and I am only using POST.
the code in the backend works, it returns what I want.
However, in my frontend application with React. I am using Formik for formhandeling, and it works when entering the data my backend wants in the post endpoint.
When adding a breakpoint to the endpoint it works just as I want.
But I also want the returned data to be visible in my React application.
Let me show you some code.
Backend
[HttpPost("Calculate")]
public ActionResult<TaxModel> PostCalculation(TaxModel model)
{
DateTime date;
if (model == null || !DateTime.TryParseExact(model.Date + " " + model.Time + ":00", "yyyy-MM-dd HH:mm:ss", CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
{
return BadRequest(BadRequestMsg);
}
try
{
var vehicle = model.Vehicle;
var calculatePrice = Calculator.GetTollFee(date, vehicle);
return Ok(new TaxModel
{
Date = model.Date,
Time = model.Time,
Vehicle = model.Vehicle,
Price = calculatePrice
});
}
catch
{
return BadRequest(BadRequestMsg);
}
}
Frontend
export const TaxForm = (props: taxFormProps) => {
return(
<Formik initialValues={props.model}
onSubmit={props.onSubmit}
validationSchema={yup.object({
date: yup.string().required("Date is required"),
time: yup.string().required("Time is required"),
vehicle: yup.string().required("Vehicle is required"),
})}>
{(FormikProps) => (
<Form>
<InputField field="date" displayName="Date" />
<InputField field="time" displayName="Time" />
<InputField field="vehicle" displayName="Vehicle" />
<Button className="" type="submit"
text="Calculate" disabled={FormikProps.isSubmitting} />
</Form>
)}
</Formik>
)
}
interface taxFormProps {
model: taxModel;
onSubmit: (values: taxModel, actions: FormikHelpers<taxModel>) => void;
}
export const PostTax = () => {
const [errors, setErrors] = useState<string[]>([]);
const [tax, setTax] = useState<taxModel>();
const create = async (tax: taxModel) => {
try{
await axios.post(`${UrlTax}/Calculate`, tax)
.then(response => {
if(response.status === 200){
setTax(response.data);
}
});
}
catch(error) {
if(error && error.response){
setErrors(error.response.data);
}
}
}
return(
<>
<h3>Calculate your toll Price</h3>
<DisplayErrors errors={errors} />
<TaxForm model={
{
date: "",
time: "",
vehicle: "",
price: 0
}}
onSubmit={async value => {
await create(value);
}} />
{/* {tax?.map(t =>
<p>{t.date} {t.time} {t.vehicle} {t.price}</p>
)} */}
<p>{tax}</p> // does not work
</>
)
}
in the React code, I am trying to add the posted data into the state, but it is not really working.
Any idea on how to fix this error?
Thanks!