estou usando o Card do material ui. Gostaria de expandi-lo ao clicar(um por vez), gero vários cards e um loop e quando clico para expandir.... todos se expandem.
como faço para expandir 01 por vez?
export default class SprintBacklog extends Component{
constructor(props) {
super(props);
this.state = { expanded: false, ItensSprintBacklog:[]};
}
componentWillMount(){
this.getItensSprintBacklog();
}
expandir(evento) {
console.log(evento.target.value)
this.setState({expanded: true});
}
handleExpandChange = (expanded) => {
this.setState({expanded: expanded});
};
handleToggle = (event, toggle) => {
this.setState({expanded: toggle});
};
handleExpand = () => {
this.setState({expanded: true});
};
handleReduce = () => {
this.setState({expanded: false});
};
render(){
return(
<div>
<MenuSuperior tipoUsuario="Scrum Master" titulo="Sprint Backlog"/>
<div className="container-fluid">
<main className="col-sm-10 ml-sm-auto col-md-10 pt-3" role="main">
<div className="row">
<div className="col-12 col-md-12 col-lg-12">
{
this.state.ItensSprintBacklog.map(function(itens, index){
return (
<MuiThemeProvider key={itens.IDSprintBacklog}>
<Card expanded={this.state.expanded} onExpandChange={this.handleExpandChange}>
<CardHeader
title={<h2>{itens.nomeItemBacklog}</h2>}
subtitle={itens.descricao}
//avatar="images/ok-128.jpg"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText key={itens.IDSprintBacklog +itens.IDProjeto} expandable={true}>
<List>
<ListItem insetChildren={true} primaryText="Janet Perkins Bennet" />
<Divider inset={true} />
<ListItem insetChildren={true} primaryText="Peter Carlsson" />
<Divider inset={true} />
<ListItem insetChildren={true} primaryText="Aaron Bennet" />
<Divider inset={true} />
<ListItem insetChildren={true} primaryText="Abbey Christensen" />
</List>
</CardText>
<CardActions >
<FlatButton
label="Mostrar Tarefas"
// onClick={this.handleExpand}
key={itens.IDSprintBacklog +itens.IDProjeto}
value={itens.IDSprintBacklog +itens.IDProjeto}
onClick={this.expandir.bind(this)}
/>
<FlatButton
key={itens.IDSprintBacklog}
label="Esconder Tarefas"
onClick={this.handleReduce}
value={itens.IDSprintBacklog +itens.IDProjeto}
/>
</CardActions>
</Card>
</MuiThemeProvider>
)
}, this)
}
</div>
</div>
</main>
</div>
</div>
);
}
}