functional component react typescript props code example

Example 1: react functional component typescript

import React from 'react';

interface Props {
  
}

export const App: React.FC<Props> = (props) => {
  return (
    <>
     <SomeComponent/>
    </>
  );
};

Example 2: TYPESCript props class component

class Test extends Component<PropsType,StateType> {
  constructor(props : PropsType){
    	super(props)
  }
  
  render(){
   	console.log(this.props) 
    return (
     	<p>this.props.whatever</p> 
    )
  }
  
};

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 (
        <div className="App">
            <h1></h1>
            <Todo todos={todos}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;