props

▶ App.tsx

import './App.css';
import Button from './components/Button';
import Child from './components/Child';
import Container from './components/Container';
import { Greet } from './components/Greet';
import Input from './components/Input';
import Parent from './components/Parent';
import Person from './components/Person';
import PersonList from './components/PersonList';
import Status from './components/Status';

function App() {
  const personname = {
    first: 'Nivya',
    last: 'George'
  }

  const nameList = [
    {
      first: 'Sino',
      last: 'Jose'
    },
    {
      first: 'Sonal',
      last: 'Thomas'
    }
  ]

  return (
    <div className="App">
      <Greet name='nelson' messageCount={12} isLoggedIn={true} />
      <Greet name='sameer' isLoggedIn={true} />
      <Person name={personname} />
      <PersonList namelist={nameList} />
      <Status status="Idle"/>
      <Parent>This is from app</Parent>
      <Child>
        <Status status="Pending"/>
      </Child>
      <Button handleClick={(event) => console.log('button clicked two more times', event)}/>
      <Input value="" eventHandler={() => console.log('input changed')}/>
      <Container styles={{border: '1px solid #ccc', padding: '10px'}}/>
    </div>
  );
}

export default App;

----------------------------------------------------------------------------------------------------------

▶ Button.tsx

import React from 'react'

type ButtonProps = {
    handleClick: (event: React.MouseEvent<HTMLButtonElement>, id: number) => void
}

const Button = (props: ButtonProps) => {
  return (
    <div><button onClick={(event) => props.handleClick(event, 1)}>Click</button></div>
  )
}

export default Button

----------------------------------------------------------------------------------------------------------

▶ Child.tsx

type ChildProps = {
    children: React.ReactNode
}

const Child = (props: ChildProps) => {
  return (
    <div>Child - {props.children}</div>
  )
}

export default Child

----------------------------------------------------------------------------------------------------------

▶ Container.tsx

type ContainerProps = {
    styles: React.CSSProperties
}

const Container = (props: ContainerProps) => {
  return (
    <div style={props.styles}>Container text here</div>
  )
}

export default Container

----------------------------------------------------------------------------------------------------------

▶ Greet.tsx
type GreetProps = {
    name: string,
    messageCount?: number,
    isLoggedIn: boolean
}
export const Greet = (props: GreetProps) => {
    const {messageCount = 0} = props
    return(
    <>
        {props.isLoggedIn ? <p>This is greeting from {props.name} and you have {props.messageCount} unread messages</p> : <p>Welcome guest</p>}
    </>   
    )
}

----------------------------------------------------------------------------------------------------------

▶ Input.tsx

type InputProps = {
    value: string,
    eventHandler: (event: React.ChangeEvent<HTMLInputElement>) => void
}

const Input = ({value, eventHandler}: InputProps) => {
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log("c")
    }
  return (
    <div>
        <input type='text' value={value} onChange={handleChange} />
    </div>
  )
}

export default Input

----------------------------------------------------------------------------------------------------------

▶ Parent.tsx

type ParentProps = {
    children: string
}

const Parent = (props: ParentProps) => {
  return (
    <div>Parent {props.children}</div>
  )
}

export default Parent

----------------------------------------------------------------------------------------------------------

▶ Person.tsx

import { PersonProps } from "./Person.types"
const Person = (props: PersonProps) => {
  return (
    <div>Person {props.name.first} {props.name.last}</div>
  )
}

export default Person

----------------------------------------------------------------------------------------------------------

▶ PersonList.tsx

import {Name} from './Person.types'

type PersonListProps = {
    namelist: Name[]
}

const PersonList = (props: PersonListProps) => {
  return (
    <div>
    {props.namelist.map((name) => {
        return(
            <p key={name.first}>{name.first} {name.last}</p>
        )
    })}
    </div>
  )
}

export default PersonList

----------------------------------------------------------------------------------------------------------

▶ Status.tsx

type StatusProps = {
    status: 'Completed' | 'Pending' | 'Idle'
}

const Status = (props: StatusProps) => {
  return (
    <div>Status - {props.status}</div>
  )
}

export default Status


----------------------------------------------------------------------------------------------------------

▶ Person.types.ts

export type Name = {
    first: string,
    last: string
}

export type PersonProps = {
    name: Name
}