class component and function component in react code example

Example 1: react function component

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Example 2: function inside a class component react

export default class Archive extends React.Component { 

    saySomething(something) {
        console.log(something);
    }

    handleClick(e) {
        this.saySomething("element clicked");
    }

    componentDidMount() {
        this.saySomething("component did mount");
    }

    render() {
        return ;
    }
}

Example 3: 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 (
        

            

             //This is how i'm passing props in parent component
        
    );
}

export default App;

Example 4: class to functional component react

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

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