Expandir cards do Material UI individualmente (React + Js) [Resolvido]

[uxthi]

Oi, pessoal!

Esse é meu primeiro post aqui, então sorry se tiver fazendo algo errado. Estou migrando recentemente pro js/react e ainda estou aprendendo, vocês poderiam me ajudar com uma dúvida?

Estou usando React/Js pra criar uma tela que exibe 2 cards do Material UI, estilizados por styled-components. O problema é: os cards são controlados pelo mesmo estado, então quando um é expandido, todos acabam sendo expandidos também.

Eu SEI que estou fazendo algo errado com os estados (ou talvez com a função que controla eles), mas não sei exatamente como resolver....

EDIT: codesandbox: https://codesandbox.io/s/mutable-dust-lwljo

Esse é o componente dos cards:

import React from 'react'
import CardContent from '@material-ui/core/CardContent'
import CardActions from '@material-ui/core/CardActions'
import Collapse from '@material-ui/core/Collapse'
import IconButton from '@material-ui/core/IconButton'
import Typography from '@material-ui/core/Typography'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import { CardLayout, CardImg } from './SiteCardStyled'

export class SiteCard extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			expand: false,
		}
	}

	handleExpandClick = () => {
		this.setState({expand: !this.state.expand})
	};

	render() {
		return <CardLayout>
			<CardImg
				image={this.props.media}
				title={this.props.mediatitle}
			/>
			<CardContent>
				<Typography
					variant="body2"
					color="textSecondary"
					component="p">
					{this.props.carddescription}
				</Typography>
			</CardContent>
			<CardActions
				disableSpacing>
				<IconButton
					onClick={this.handleExpandClick}
				>
					<ExpandMoreIcon />
				</IconButton>
			</CardActions>
			<Collapse
				in={this.state.expand}
				timeout="auto" unmountOnExit>
				<CardContent>
					<Typography
						paragraph>
						{this.props.cardexpandedtitle}
					</Typography>
					<Typography
						paragraph>
						{this.props.cardexpandedtext}
					</Typography>
				</CardContent>
			</Collapse>
		</CardLayout>
	}
}

E é aqui que eu renderizo os cards:

import React from 'react'
import { MainPage, MainPageWrapper, SiteCardArea } from './AppContainerStyled'
import { MenuTop } from './MenuTop/MenuTop'
import { MainText } from './MainText/MainText'
import { SiteCard } from './SiteCard/SiteCard'

export class AppContainer extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
		}
	}

	render() {
		return <MainPage>
			<MainPageWrapper>
				<MenuTop></MenuTop>
				<MainText></MainText>
				<SiteCardArea>
					<SiteCard
						cardtitle={'title'}
						mediatitle={'mediatitle'}
						media={'https://i.picsum.photos/id/682/300/300.jpg'}
						carddescription={'sitedescription'}
						cardexpandedtitle={'cardexpandedtitle'}
						cardexpandedtext={'cardexpandedtext'}
					/>
					<SiteCard
						cardtitle={'title2'}
						mediatitle={'mediatitle2'}
						media={'https://i.picsum.photos/id/682/300/300.jpg'}
						carddescription={'sitedescription2'}
						cardexpandedtitle={'cardexpandedtitle2'}
						cardexpandedtext={'cardexpandedtext2'}
					/>
				</SiteCardArea>
			</MainPageWrapper>
		</MainPage>
	}
}

Alguma luz? Obrigado, pessoal!

[victorferreira]

Aparentemente está tudo certo já que cada SiteCard controla seu próprio estado. Seria legal se você colocasse esse código num codesandbox.io pra gente poder ver funcionado e poder debbugar melhor.

[uxthi]

@victorferreira Opa, obrigado pela resposta e pela sugestão! Fiz um mock no codesandbox e agora da pra ver direito o que falei: ao expandir os cards, acabo expandindo dos dois juntos, porque é um estado só controlando ambos. Eu só não sei como evitar isso, porque se eu criar dois estados, não vou saber como fazer a função reconhecer em QUAL card eu o usuário ta clicando, sabe?

https://codesandbox.io/s/mutable-dust-lwljo

[victorferreira]

Como eu disse anteriormente, o seu código react está correto. Cada SiteCard controla seu próprio estado, e o problema no caso é com CSS. Os cards ocupam a altura do container, daí quando um card expande todos os outros tem o height alterado. Uma possível solução é definir um height fixo pra cada card.

[uxthi]

@victorferreira Caramba, muito obrigado, eu tava quebrando a cabeça e era TÃO simples! Realmente você tava certo, bastou adicionar um height: 100% ao <CardLayout> e pronto, agora os cards funcionam como e esperado. Obrigado de verdade!