React JS

3)Show/Hide Text
You want to show paragraph only when button is clicked.
What kind of state works best?
Why boolean is suitable here?

ShowHide.jsx

import {useState} from "react";
function ShowHide(){
    const[click,setClick]=useState("");

    function show(){
        setClick("React is a JavaScript library used to build interactive user interfaces (UI) for websites and web applications. It was created by Facebook (Meta) and is one of the most popular tools for front-end development.")
        console.log("Show")

    }
    return(
        <div>
            <h1>Show-Hide Button</h1>
            <button onClick={show}>Show</button>
            <p>{click}</p>
        </div>
    )
}
export default ShowHide;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import ShowHide from './Show-Hide'


function App() {

  return (

<ShowHide/>
  )
}

export default App

4)Character Counter
User types in textarea. You show number of characters.
How do you track text length?
Should you store both text and length in state?

CountChar.jsx

import {useState} from 'react';

function CountChar(){
const[count, setCount]=useState();

    function char(event){
        let userInput = event.target.value
        setCount(userInput.length);
        // console.log("count") 
    }

    return(
       <div>
         <input type="Text" onChange={char}></input>
        <p> Count:{count}</p>
       </div>
    )
}
export default CountChar;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import CountChar from './CountChar'

function App() {
  const [count, setCount] = useState(0)

  return (
    <CountChar />
  )
}

export default App