Estoy agregando todo lo que se necesita para crear una publicación, pero recibo un mensaje de error que dice "La instalación debe existir". Por alguna razón, el id_instalación está capturando el nombre de la instalación y no la ID. Estoy configurando el estado de las instalaciones y mapeando/filtrando para mi menú desplegable. Por favor ver más abajo:
function AddPostForm({ posts, handlePost}) { const [facilities, setFacilities] = useState ([]) const [procedures, setProcedures] = useState ([]) const uniques = procedures.map(procedure => procedure.procedure) .filter((value, index, self) => self.indexOf(value) === index ) // console.log("unique procedures:", uniques) const uniqFacility = facilities.map(facility => facility.name).filter((value,index, self) => self.indexOf(value) === index) useEffect(() => { fetch(`/posts/${procedures}`) .then((r) => r.json()) .then(setProcedures); }, []); useEffect(() => { fetch("/facilities") .then((r) => r.json()) .then(setFacilities); }, []); const [formData, setFormData] = useState({ facility_id: "", procedure:'', date_of_procedure:'', date_of_invoice:'', patient_cost: "", insurance_cost: "", comments: "" }) const { id } = useParams(); function handleChange(event) { setFormData({ ...formData,[event.target.name]: event.target.value, }); } function handleSubmit(event) { event.preventDefault(); handlePost(formData) return ( <div > <form onSubmit={handleSubmit}> <label htmlFor="facility_id">Facility:</label> <select id="facility_id" name="facility_id" value={formData.facility_id} onChange={handleChange} > <option value="">Select Facility</option> {uniqFacility.map((facility) => ( <option key={facility.id} value={facility.name}> {facility} </option> ))} </select> </form> </div> ); } export default AddPostForm;