Level 63
What do you see in the console with this ?
const parameterPromises = parameterData.map((parameter) => {
console.log(parameter);
// return axios.post(`${BASE_API_URL}/sc_parameter`, parameter);
});
Aug 1, 2023
5
Level 3
In my react app i have a component which is posting to two different tables but when i press submit button data only goes to 1 of the tables
in my react component i am posting to scorecard table and sc_parameter table the selected parameters are being posted to sc_parameters table and everything else to scorecard table so the data going to the scorecard table when i press submit it but i dont see the selected parameters in the sc_parameter table i have tried everything i can think about my code
import { useEffect, useState } from 'react';
import axios from 'axios';
import Stepper from "../Stepper/Stepper";
const BASE_API_URL = 'http://localhost:8000';
export default function CreateScorecard() {
const [formData, setFormData] = useState({
name: '',
desc: '',
slug: '',
sc_type_id: '',
bc_component_id: '',
active: false,
});
const [selectedParameters, setSelectedParameters] = useState([]);
const [selectedParameter, setSelectedParameter] = useState('');
const handleParameterChange = (event) => {
const parameter = event.target.value;
if (!parameter) {
alert('Please enter a parameter.');
return;
}
setSelectedParameter(parameter);
};
const handleAddParameter = (event) => {
event.preventDefault();
if (selectedParameter) {
setSelectedParameters([...selectedParameters, selectedParameter]);
setSelectedParameter('');
}
};
const handleRemoveParameter = (parameter) => {
setSelectedParameters(selectedParameters.filter((p) => p !== parameter));
};
const handleChange = (event) => {
const { name, value } = event.target;
if (name === 'scorecardType') {
const scTypeId = {
CR: 1,
RA: 2,
TokenRanking: 3,
}[value];
setFormData((prevData) => ({
...prevData,
[name]: value,
sc_type_id: scTypeId,
}));
} else {
setFormData((prevData) => ({ ...prevData, [name]: value }));
}
};
const [bcComponents, setBcComponents] = useState([]);
useEffect(() => {
axios
.get(`${BASE_API_URL}/bc_components/`)
.then((response) => {
setBcComponents(response.data);
})
.catch((error) => {
console.error(error);
});
}, []);
const handleSubmit = async (event) => {
event.preventDefault();
try {
const formDataWithParameters = {
...formData,
};
const scorecardResponse = await axios.post(`${BASE_API_URL}/scorecards`, formDataWithParameters);
const scorecardId = scorecardResponse.data.id;
const parameterData = selectedParameters.map((parameter, index) => ({
parameter_no: index + 1,
name: parameter,
scorecard_id: scorecardId,
}));
const parameterPromises = parameterData.map((parameter) => {
return axios.post(`${BASE_API_URL}/sc_parameter`, parameter);
});
await Promise.all(parameterPromises).catch((error) => {
console.error(error);
});
window.location.href = '/home/createScorecard-step2';
} catch (error) {
console.error(error);
}
};
const handleReset = () => {
setFormData({
name: '',
desc: '',
slug: '',
sc_type_id: '',
bc_component_id: '',
active: false,
});
setSelectedParameters([]);
setSelectedParameter('');
};
return (
<div className="h-full w-9/12 mt-3 py-1 px-1 justify-center mx-80 rounded">
<Stepper/>
<form className="mt-10 border-t-2 border-dashed" onSubmit={handleSubmit}>
<div className="mt-7 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">Name of Scorecard *</label>
<input
type="text"
className="p-1 border-2 rounded w-80"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div className="mt-7 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">Desc of Scorecard</label>
<input
type="text"
className="p-1 border-2 rounded w-80"
name="desc"
value={formData.desc}
onChange={handleChange}
/>
</div>
<div className="mt-5 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">Slug</label>
<input
type="text"
className="p-1 border-2 rounded w-80"
name="slug"
value={formData.slug}
onChange={handleChange}
/>
</div>
<div className="mt-5 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">Type of Scorecard *</label><div className="flex items-center">
<input
type="radio"
id="option1"
name="scorecardType"
value="CR"
className="form-radio h-5 w-5 text-indigo-600"
onChange={handleChange}
/>
<label htmlFor="option1" className="ml-2">
Credit Rating (CR)
</label>
</div>
<div className="flex items-center">
<input
type="radio"
id="option2"
name="scorecardType"
value="RA"
className="form-radio h-5 w-5 text-indigo-600"
onChange={handleChange}
/>
<label htmlFor="option2" className="ml-2">
Risk Assessment (RA)
</label>
</div>
<div className="flex items-center">
<input
type="radio"
id="option3"
name="scorecardType"
value="TokenRanking"
className="form-radio h-5 w-5 text-indigo-600"
onChange={handleChange}
/>
<label htmlFor="option3" className="ml-2">
Token Ranking
</label>
</div>
</div>
<div className="mt-5 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">
Blockchain Components *
</label>
<div className="relative w-80">
<select
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
name="bc_component_id"
value={formData.bc_component_id}
onChange={handleChange}
>
{bcComponents.map((component) => (
<option key={component.id} value={component.id}>
{component.name}
</option>
))}
</select>
<div
className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg
className="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 13.293a1 1 0 011.414 0L14 16.586V5a1 1 0 112 0v11.586l2.293-2.293a1 1 0 111.414 1.414l-4 4a1.002 1.002 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</div>
</div>
</div>
<div className="mt-5 flex space-x-5">
<label className="block text-gray-700 font-semibold mt-2 w-48">Parameters</label>
</div>
<div className="flex mt-5">
<label className="block font-semibold mt-2 w-48">
Add Parameter
</label>
<div className="relative w-80 ml-6">
<input
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
type="text"
value={selectedParameter}
onChange={handleParameterChange}
/>
<button
className="absolute right-0 top-0 bottom-0 px-4 py-2 text-white bg-retro rounded-r"
onClick={handleAddParameter}
>
Add
</button>
</div>
</div>
<div className="mt-5">
{selectedParameters.length > 0 && (
<div>
<h2 className="font-semibold">Selected Parameters:</h2>
<div className="flex flex-col rounded space-y-2">
{selectedParameters.map((parameter, index) => (
<div key={parameter} className="flex space-x-1">
<label className="p-1 rounded w-40">{`Parameter ${index + 1}`}</label>
<input
type="text"
className="p-1 border-2 rounded w-80"
value={parameter}
readOnly
/>
<button
className="px-2 py-1 font-medium text-white bg-red-700 rounded-md"
onClick={() => handleRemoveParameter(parameter)}
>
Remove
</button>
</div>
))}
</div>
</div>
)}
</div>
<div className="mt-5 flex justify-center mx-auto w-72 py-8">
<div className="justify-between flex space-x-20">
<button
className="h-8 w-20 ring-1 ring-blue1 text-blue1 hover:bg-retro hover:text-white rounded transition"
>
Back
</button>
<button
type="button"
className="h-8 w-20 ring-1 ring-blue1 text-blue1 hover:bg-retro hover:text-white rounded transition"
onClick={handleReset}
>
Reset
</button>
<button
type="submit"
className="h-8 w-20 bg-blue1 text-white hover:bg-black1 rounded transition text-center"
>
<h1 className="mt-1">Continue</h1>
</button>
</div>
</div>
</form>
</div>
);
}
Level 3
@vincent15000 i see nothing
1 like
Level 63
@Farirai If you see nothing, that means that the parameterData array is empty, so it's normal that you don't store anything in the sc_parameter table.
The next step is to understand why this array is empty.
Level 3
@vincent15000 thats what im trying to understand could the error be how im storing my selected parameters
1 like
Level 63
@Farirai I would try this to see if the selected parameters array is empty or not.
console.log(selectedParameters.length);
console.log(selectedParameters);
console.log(selectedParameters[0]);
Please or to participate in this conversation.