Estas son las vistas Lista y Cuadrícula. ¿Cómo agrego funcionalidad al botón de alternancia usando States.

 <div> - List item { this.state.articles.map((element) =>{ return <div className="media m-3 p-2" style={{border:"1px solid black"}}> <img className="mr-3 " src={element.thumb_url}style={{height:"50px", width:"50px"}} alt="Generic placeholder image"/> <div className="media-body"> <h5 className="mt-0">{element.eventname}</h5> <p>{element.venue.street}</p> <p className="card-text"><small className="text-muted">on {element.start_time_display} </small></p> <a href={element.eventUrl} target="_blank" className="btn btn-sm btn-warning">View Details</a> </div> </div> <div className="container my-3"> // <h3 className="text-center" style={{ margin: "35px 0px" }}>{document.title = `Discover Best Of Online Events [${this.props.category}]`}</h3> // When loading will true it shows sppinner // {this.state.loading && <Spinner />} // {this.state.articles.map((element) => console.log(element))} // { under the className row all the elements are aligned one by one } // <div className="row my-4"> // <div className="list-group"> // when iterating the results from API it needs to give unique key // {this.state.articles.map((element) => { // return <div className="col-md-3" key={element.event_id}> // <Events imageUrl={element.thumb_url_large} title={element.eventname} eventUrl={element.event_url} date={element.start_time_display} city={element.venue.city} /> // </div> // })} // </div> // </div>