react props on class component code example

Example 1: react fun tion

// it a component
import React from 'react';

class App extends React.Component {
      //call function (ECMAScript 5) from tag input:text
  handleChange = e => {
    //
    console.log(`${e.target.value}`)
  }
  render() { 
    return (
      <div className="App">
        <input type="text" name="input" id="" placeholder="" onChange={this.handleChange}/>
      </div>
    );
}
}

export default App;

Example 2: 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 3: defining props in react

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

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

Example 4: react props

Props is a way to transform data from one component to another.
<Ball numbre = '1'/>
 //IN component
  {this.props.numbre} // in html is 1