¿Por qué los accesorios no funcionan en mi proyecto? ¡No puedo descifrar! Aquí está el archivo de tres. Estoy aprendiendo mecanografiado. ¡Pero el código no es un error pero aún no funciona!
Este es el archivo index.tsx
índice.tsx
const Home: NextPage = () => { return ( <div className={styles.container}> <Header name={"ali Ahad"} /> <PersonList Person={Person} /> </div> ) } export default HomeEste es el archivo PersonList.tsx
ListaPersonas.tsx
type personType={ Person:{ name:string, age:number, address:string }[]; }; const PersonList=(props: personType)=> { return ( <>{props.Person.map((man)=>{ <div> <h1>{man.name}</h1> <h2>{man.age}</h2> <h3>{man.address}</h3> </div> })}</> ) } export default PersonListEste es el archivo Data.tsx
Datos.tsx
const Person=[ { name:"John", age:30, address:"New York" }, { name:"Ali", age:25, address:"New York" }, { name:"Ahmad", age:20, address:"New York" }, ] export default Person;No está viendo a ninguna de las personas que se muestran/representan porque le falta una declaración de return explícita en la función de flecha de su map() .
// returning from a block body (braces) requires an explicit `return` return ( <> {props.Person.map((man) => { /* missing `return` */ <div> <h1>{man.name}</h1> <h2>{man.age}</h2> <h3>{man.address}</h3> </div>; })} </> );Tendrías que hacer algo como esto...
// with an explicit `return` this will work, albeit verbose return ( <> {props.Person.map((man) => { /* `return` added */ return ( <div key={man.name}> <h1>{man.name}</h1> <h2>{man.age}</h2> <h3>{man.address}</h3> </div> ); })} </> );... pero esto sería más conciso:
// removing the braces (replaced with parentheses) will make things concise // and the `return` will be implied return ( <> {props.Person.map((man) => ( <div key={man.name}> <h1>{man.name}</h1> <h2>{man.age}</h2> <h3>{man.address}</h3> </div> ))} </> );