Estou fazendo um projeto onde preciso de vários cards de receitas que conterão: título e ingredientes. Esses cards devem ser expansíveis (O usuário verá o título e ao clicar, os ingredientes serão mostrados) e para facilitar, estou usando o Material Ui.
Como não sei a quantidade (a aplicação será dinâmica), gostaria de usar map()
e notei que precisarei de dois map()
: Um para os cards e outro para a lista de ingredientes que serão renderizados dentro do card.
Abaixo estão: o exemplo de objeto de entrada que usei para testar, como pensei em fazer a manipulação desse objeto e a mensagem de erro exibida.
Exemplo de entrada:
const teste2 =[{
title:"Brigadeiro",
ingredients:["margarina","achocolatado","leite condensado"]
},{
title: "Pão assado",
ingredients:["pão","margarina"]
}]
Como pensei em fazer:
const Recipes = (props) =>{
let recipesList = props.objects.map((object, index)=>{
let ingrList = object.ingredients.map((ingred,index)=>(
<CardText expandable={true}>
{ingred}
</CardText>
))
return(
<Card>
<CardHeader
title={object.title}
actAsExpander={true}
showExpandableButton={true}
/>
<CardText>
{ingrList}
</CardText>
</Card>
)})
}
Erro:
Recipes(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Evaluating index.js
Alguém teria uma dica do que fazer? Existe algum método map()
para objetos?
Observação:
Tentei separar mais os objetos, criando um só para as listas de ingredientes e renderizando-o dentro dos cards de receitas, porém a propriedade expandable={true}
do componente <CardText>
deixa de funcionar (os ingredientes aparecem sempre expandidos). Vale salientar que, nesse teste, não usei objetos.
Recipes
? Onde está o componente principal e orender()
?