Estou criando um app em React com TypeScript que faz buscas na API do GitHub.
Estou tendo problema em passar um array como props para outro componente.
A lógica seria: User
tem Repos
(array de repositórios do GitHub), que por sua vez tem RepoItem
(objeto individual do array).
Mas estou recebendo o seguinte erro:
JSX element type 'Element[]' is not a constructor function for JSX elements. Type 'Element[]' is missing the following properties from type 'Element': type, props, key TS2605
Arquivo App.tsx
:
return (
<User
user={user}
repos={repos}
loading={loading}
/>
);
Arquivo User.tsx
:
O erro ocorre especificamente no seguinte trecho: <Repos repos={repos} />
, no método render
do componente User
.
import React, { Component, Fragment } from "react";
import Repos from "../repos/Repos";
import { RouteComponentProps } from "react-router";
interface IRepos {
id: string;
name: string;
html_url: string;
}
interface IUser {
user: any;
loading: boolean;
repos: IRepos[];
}
class User extends Component<IUser & RouteComponentProps> {
render() {
const { loading, repos } = this.props;
if (loading) {
return <Spinner />;
} else {
return (
<Fragment>
<Repos repos={repos} />
</Fragment>
);
}
}
}
export default User;
Arquivo Repos.tsx
:
import React from "react";
import PropTypes from "prop-types";
import RepoItem from "./RepoItem";
interface IRepos {
id: string;
name: string;
html_url: string;
}
interface IRepoWrapper {
repos: IRepos[];
}
const Repos = ({ repos }: IRepoWrapper) => {
return repos.map(repo => <RepoItem repo={repo} key={repo.id} />);
};
Repos.propTypes = {
repos: PropTypes.array.isRequired
};
export default Repos;
Arquivo RepoItem.tsx
:
import React from "react";
import PropTypes from "prop-types";
interface IRepos {
repo: {
id: String;
name: String;
html_url: string;
};
}
const RepoItem = ({ repo }: IRepos) => {
return (
<div className='card'>
<h3>
<a href={repo.html_url}>{repo.name}</a>
</h3>
</div>
);
};
RepoItem.propTypes = {
repo: PropTypes.object.isRequired
};
export default RepoItem;
Eu fiz um teste trazendo RepoItem
direto para User
, e então utilizando map
para retornar diversos <RepoItem />
e funcionou. Porém eu gostaria de fazer isso dentro de Repos
, e não dentro de User
.
Repos
está retornando. Provavelmente, por alguma razão, o React espera um objeto (React Element), mas está recebendo um array. Tente envolver o retorno desse componente em umFragment
. Provavelmente resolve.Repos
está retornando umarray.map()
certo? Você quer que eu encapsule oarray.map()
dentro de umFragment
? Acredito que eu não possa chamar minha funçãomap
dentro de um elementoJSX
. Não estou conseguindo realizarmap
dentro do JSX sim... Para isso, utilize{}
para avaliar expressões dentro do JSX. Veja a resposta publicada agora.