class components with props code example

Example 1: 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>
        )
    }
}

Example 2: defining props in react

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);