thelastone pada 14 September 2017

Selamat malam, saya lagi belajar react js ingin show/hide image yang sudah di looping satu per satu sesuai dengan gambar dan id nya. Saya udah buat show/hide nya, tapi kalau misalkan di klik show/hide itu yang ke hide semua image nya, pertanyaan nya bagaimana ya supaya show/hide image nya itu sesuai dengan id nya masing masing?
```
class App extends Component {
constructor(props) {
super(props);
this.state = {
show: true
};
this.toggleDiv = this.toggleDiv.bind(this);
}

    toggleDiv = () => {
        const { show } = this.state;
        this.setState( {show: !show} )
    }

    render() {
        const { trees } = this.props;
        const treeLists = trees.map(tree => {
            return (
                <div className="col-sm-4" key={tree.name}>
                    <div className="card">
                        {this.state.show && (<img className="card-img-top img-responsive" src={tree.image} alt={tree.name} />)}
                        <div className="card-body">
                            <h4 className="card-title">{tree.name}</h4>
                            <p className="card-text">{tree.species_name}</p>
                            <button onClick={this.toggleDiv == tree.id} className="btn btn-primary">Toggle Image</button>
                        </div>
                    </div>
                </div>
            )
        });

        return (
            <div className="container">
                <div className="row">{treeLists}</div>
            </div>
        );
    }
}
Sustiono pada 26 September 2017

kalo menurut saya yg di simpen di state bukan show, tapi id yg mau di hide, jadi ktika button hide di klik kn bisa kirim id sbgai parameter ke functionya, nah id itu simpn di state, nnti pas gambarnya di loop di cek atau di cari yg idnya sesuai dengan id yg ada di state tadi, klo misalkn ketemu yg sma kompenennya di kasih class buat di hide di cssnya nnti