React task_day-2

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

OUTPUT:

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

OUTPUT:

5)Form with Multiple Inputs
You have 5 input fields (name, email, phone, city, password).
Better to use:
5 separate useState?
OR one object state?
Why?
What problem happens if you update object state incorrectly?

MultipleInput.jsx

import { useState } from "react"
function MultipleInput(){
    const [file,setFile]=useState({
        name:'',
        mail:'',
        phone:'',
        city:'',
        password:''
    })
    const [ show,setShow]=useState(false)

    function form(e){
        setFile({...file,[e.target.name]:e.target.value})
    }
    function submit(){
        setShow(true)    
    }
    return(
        <div>
            <input type='text' placeholder="enter a name" onChange={form} value={file.name} name='name'></input><br></br>
            <input type='email' placeholder="enter a mail" onChange={form} value={file.mail} name='mail'></input><br></br>
            <input type='text' placeholder="enter a phone" onChange={form} value={file.phone} name='phone'></input><br></br>
            <input type='text' placeholder="enter your city" onChange={form} value={file.city} name='city'></input><br></br>
            <input type='password'placeholder="enter a password" onChange={form} value={file.password} name='password'></input><br></br>
            <button onClick={submit}>submit</button><br></br>Details
            {show && 
            <>
            <p>Name:{file.name}</p>
            <p>Email:{file.mail}</p>
            <p>Phone:{file.phone}</p>
            <p>City:{file.city}</p>
            <p>Password:{file.password}</p>
            </>
            }   
        </div>
    )
}

export default MultipleInput;

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 Input from './Input'


function App() {

  return (
    <Input/>
  )
}

export default App;

Comments

[Kiruthiga S]

wow super👏