react function props code example

Example 1: create react component class

class MyComponent extends React.Component{
    constructor(props){
        super(props);
    };
    render(){
        return(
            <div>
              <h1>
              	My First React Component!
              </h1>
            </div>
        );
    }
};

Example 2: function component with props

import React from "react"

function Checkbox(props){
    return (
        <div>
            <input type="checkbox" />
            <label>{props.value}</label>
        </div>
    )
}

export default Checkbox

Example 3: functional component react

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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