useRef and useEffect in React

 app.js

import React, {useRef, useEffect, useState} from 'react'

import {Link} from 'react-router-dom'

// React -> will re-render (props/state)

export default function Home(props){

    // Google Captcha

    const h1Ref = useRef()

    const [counter, setCounter] = useState(0)

    const [counter2, setCounter2] = useState(0)

    useEffect(() =>{

        //fetching course information -> when the URL changes

        console.log(h1Ref)

    }, [counter2])

    return (

        <div ref={h1Ref}>

         <h1>{counter}</h1>

         <h1>{counter2}</h1>

         <button onClick={ ()=> setCounter(counter => counter+1)}> Counter 1</button>

         <button onClick={ ()=> setCounter2(counter => counter+1)}> Counter 2</button>

            

    </div>

    )

}

Parameterized Routing in React

 App.js

 import React from 'react'

 import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from 'react-router-dom'

import Home from './components/Home'

import About from './components/About'

import Greet from './components/Greet'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

function App() {

  return(

      <Router>

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/about" exact component={About} />

          <Route path="/greet/:name" exact component={Greet} />

        </Switch>

      </Router>

  )

}

export default App

Components -> Home-> index.js

import React from 'react'

import {Link} from 'react-router-dom'

export default function Home(){

    return <h1>Home. Go to <Link to="/about">About</Link></h1>

}

Components -> Greet-> index.js

import React from 'react'

import {useParams} from 'react-router-dom'

export default function Greet(){

    const params = useParams()

    console.log(params)

return <h1>Hello {params.name}</h1>

}

Components -> About-> index.js

import React from 'react'

export default function About(){

    return <h1>About</h1>

}

List in React

 App.js

 import React from 'react'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

const arr = [{

  name: 'Prabin',

  rollnumber: 1

}, {

  name: 'ABC',

  rollnumber: 2

}]

function App() {

  return(

      <ul>

        {arr.map(elem => <li key={elem.rollnumber}>

          {elem.rollnumber} - {elem.name}</li>)}

      </ul>

  )

}

export default App

Props in React

App.js

 import React from 'react'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

//null, numbers, HTML, strings, arrays

function GreetComponent(props){

  return <div>

  <h1> Hello {props.name}</h1>

  {props.children}

  </div>

}

function App() {

  return(

    <GreetComponent name="Mehul" children="222">

        <p>This code still works</p>

      </GreetComponent>

  )

}

export default App