Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Material ui: Card e loop

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>
        );
    }
}
3 respostas

Luiz, você precisaria ter uma lista de objetos dos cards que você deseja, e nesse card criar um estado true e false para o expanded de cada um, assim no click você manipula o objeto atual e só um será aberto.

Espero ter ajudado :)

Obrigado Mario poderia me dar um exemplo como o código ficaria usando map

solução!
    render() {
        return (
            <div>
                <h1>Pokedex</h1>

                <input type="search" onInput={ this.handleUserSearch }/>

                {this.state.pokemons.map((pokemon, index) => {
                    return (
                        pokemon.isVisible && <li key={pokemon.number*index}><strong>{pokemon.number}</strong> {pokemon.name}</li>
                    )
                })}
            </div>
        )
    }

Opa, esse seria um exemplo.