Estoy desarrollando un formulario de descarga de pdfs de una api de drupal, los pdfs se mapean dentro de las opciones de un select, cuando selecciono un pdf al darle al botón de descarga me tiene que abrir el enlace donde esta ubicado ese pdf y desde allí ya se puede descargar. E recogido el valor de la opcion seleccionada y e puesto una etiqueta para al pulsar redirigir la pagina a la dirección donde esta el pdf, pero no me deja usar el href, me da el siguiente error : The expected type comes from property 'href' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>', como puedo solucionar este error?.
import React from 'react'
import { forwardRef, AnchorHTMLAttributes, HTMLAttributes} from 'react'
import { useState, useEffect, useRef } from 'react'
import { getDocument } from '../../api/drupalAPI'
import { Document } from '@icofcv/common';
type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>
export function Manuals () {
const [documents, setDocuments] = useState<Document[]>([]);
const [inputValue, setInputValue] = useState("")
const ref = useRef<HTMLAnchorElement>(null)
const [isLoading, setIsLoading] = useState (false)
const fetchDocuments = async () => {
setIsLoading(true)
getDocument().then((response) => {
console.log(response)
setDocuments(response);
setIsLoading(false)
}).catch((error) => {
console.error(error);
throw error;
});
}
useEffect(() => {
fetchDocuments();
}, []);
return(
<>
<div className="card bg-white px-2 py-3 md:p-6">
<h1 className="pb-3 font-medium">Manuales de Estándares</h1>
<div className="card-body py-2 md:px-12 mx-auto w-100">
<p className="text-neutral-600 text-sm mb-2">Manual de estándares de la práctica de la Fisioterapia en Centros Sanitarios</p>
<button className="btn bg-teal-600 hover:bg-teal-700 text-white px-8 w-40" type="button">Descargar</button>
<p className="text-neutral-600 text-sm font-bold my-2">Desde el siguiente formulario podrá descargar los anexos del manual, se han clasificado en 2 grupos para una mejor búsqueda.</p>
<div className="flex flex-col md:flex-row items-end justify-between my-4">
<div className="relative z-0 w-full group">
<label className="block text-sm font-medium text-gray-900 mb-2">Anexos Estándares*</label>
<select onChange={(e) => setInputValue(e.target.value)} id="" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Seleccione Anexo I</option>
{documents.map(docu => (
<>
<option key={docu.id} selected>{docu.contentUrl}</option>
</>
))}
</select>
</div>
<a ref={ref} href={(e: React.FormEvent<HTMLInputElement>) => { const newValue = e.currentTarget.value;setInputValue(newValue)}}></a>
</div>
<div className="flex flex-col md:flex-row items-end justify-between my-4">
<div className="relative z-0 w-full group">
<label className="block text-sm font-medium text-gray-900 mb-2">Anexos Estándares*</label>
<select id="" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Seleccione Anexo II</option>
</select>
</div>
<button className="btn bg-teal-600 hover:bg-teal-700 text-white px-8 ml-4 w-full md:w-40 my-2 md:my-0" type="button">Descargar</button>
</div>
<div className="flex flex-col md:flex-row items-end justify-between my-4">
<div className="relative z-0 w-full group">
<label className="block text-sm font-medium text-gray-900 mb-2">Anexos Estándares*</label>
<select id="" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option selected>Seleccione Anexo III</option>
</select>
</div>
<button className="btn bg-teal-600 hover:bg-teal-700 text-white px-8 ml-4 w-full md:w-40 my-2 md:my-0" type="button">Descargar</button>
</div>
</div>
</div>
</>
)
}