hola tengo que trabajar sobre un | midudev - Aprende y Mejora en Programación JavaScript | Page 1

y este es el componente:
`// import area
import React from "react";
import { IOwnerProfileForm } from "../../../models";

// OwnerProfile
const dataOwner: IOwnerProfileForm[] = [
{
id: 1,
label: "Name",
name: "name",
placeholder: "Name",
},
];
interface InputProps {
type?: string | undefined;
name?: string;
value?: any;
placeholder?: string | undefined;
label?: string | undefined | any;
key?: string | undefined;
}

function OwnerProfile({
type,
name,
value,
placeholder,
label,
key,
}: InputProps) {
/* function Form() {
function handleSubmit(e: { preventDefault: () => void; }) {
e.preventDefault();
console.log('You clicked submit.');
} */
return (
<div className='generalContainer'>
<p className='title'>Mein Profil</p>
<form className='containerForm' key={key}>
{dataOwner.map((item: any) => (
<div className='divInputs'>
<input
type={type}
className='inputs'
key={item}
placeholder={item.placeholder}
name={item.name}
/>
</div>
))}
</form>
<div className='buttonContainer'>
<button type='submit'>Save</button>
</div>
</div>
);
}
OwnerProfile.defaultProps = {
type: "text",
name: undefined,
value: undefined,
placeholder: undefined,
label: undefined,
};
// Export area
export default OwnerProfile;
`

y esta es la función que resuelve las rutas
`export function RenderRoutes({ routes }: { routes: Routes[] }) {
// console.log("routes", routes);
return (
<Switch>
{routes.map((route, i) => {
if (route.protected) {
return (
<ProtectedRoutes
{...route}
component={(route.routes as RouteItem).component}
/>
);
} else if (!route.protected) {
return <RouteWithSubRoutes {...route} />;
}
})}

  <Route path='*' component={NotFound} />
</Switch>

);
}`

#hola tengo que trabajar sobre un