react class and props example
import React, { Component } from 'react' import './TourList.scss'; import Tour from '../Tour/Tour'; import { tourData } from './tourData'; export default class TourList extends Component { state={ tours:tourData } render() { const {tours}=this.state return ( <section className="toulist"> {tours.map(tour=>{ return <Tour key={tour.id} tour={tour} />; })} </section> ) } } //------------------------------------------------------ import React, { Component } from 'react'; import './Tour.scss'; export default class Tour extends Component { state={ showinfo:false, name:"" } handleInfo=()=>{ this.setState({ showinfo:!this.state.showinfo, name:"kumar" }) } render() { const {id,city,name,info,img}=this.props.tour return ( <div className="grid"> <article className="tour"> <div className="img-container"> <img src={img}></img> <span className="close-btn"> <i class="fa fa-window-close"></i> </span> </div> <div className="info"> <div className="tour-info"> <h3>{name}</h3> <h4>{city}</h4> <h5>info{""} <span class="fa fa-caret-square-down" onClick={this.handleInfo}></span></h5> </div> {this.state.showinfo && <p>{info}{this.state.name}</p>} </div> </article> </div> ) } }
