react pass props to functional component 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: 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 3: How to acces props of a functional component

const Child = (props) => {  return (    <div style={{backgroundColor: props.eyeColor}} />  )}

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>
        )
    }
}

Example 5: how to use props in functional component in react

import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo'



function App() {
    const [todos, setTodos] = useState([
        {
          id: 1,
          title: 'This is first list'
        },
        {
          id: 2,
          title: 'This is second list'
        },
        {
          id: 3,
          title: 'This is third list'
        },
    ]);

return (
        <div className="App">
            <h1></h1>
            <Todo todos={todos}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;

Example 6: class to functional component react

// convert a class component to a functional component
class MyComponent extends React.Component {
	state: { 
      name: 'Bob' 
    }
	render() {
      return (
        <p>Hello, my name is {this.state.name}</p>
      );
    }
}

const MyComponent = () => {
  const [name, setName] = React.useState('Bob');
  return (<p>Hello, my name is {name}</p>);
}