https://www.youtube.com/watch?v=F3JtTwU30D4&list=PL6K9UwOFzuZg_cRAqP2QqCvxQDR6FnEMh&ab_channel=SaloniDecodes
import React, { useEffect, useState } from 'react'
const Useeffect = () => {
const [data,setData]=useState([])
const [loading,setloading]=useState(false)
const [error,setError]=useState({status: false,msg :""})
const fetchdata =async ()=>{
try {
setloading(true)
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const datas = await response.json()
setData(datas)
console.log(datas)
setloading(false)
} catch (error) {
setloading(false)
setError({
status:true,
msg : error.message || "somthing went wrong"
})
}
}
useEffect(()=>{
fetchdata()
},[])
if(loading){
return <div>
<h4>loading.....</h4>
</div>
}
if (error?.status){
return(
<div style={{color:'red'}}>
{error.msg}
</div>
)
}
console.log(data)
return (
<div>
{
data.map((e)=>{
const {id, name, email} =e
return <div key={id}>
{name}
{email}
</div>
})
}
{/* ///////////////////////////////////////// */}
{
data.map((e)=>{
const {id,name,phone,address}=e
return(
<div key={id}>
{name}
</div>
)
})
}
</div>
)
}
export default Useeffect
import React, { useState } from 'react'
const Usestate = () => {
const [count,setCount]=useState(0)
const handletoincress= ()=>{
setCount((e)=>{
return e +1
})
}
return (
<div>
<button onClick={handletoincress}>+</button>
{count}
<button onClick={()=>setCount((e)=>{
return e-1
})}>1</button>
</div>
)
}
export default Usestate
import React, { useState } from 'react'
const Usestate2 = () => {
const intialArray = [
{
id: "sdhaffsdkfjas",
firstName: "emma",
lastName: "watson",
age: 27,
},
{
id: "ksafewyiasere",
firstName: "srikanth",
lastName: "racharla",
age: 24,
},
{
id: "35232fsf",
firstName: "don",
lastName: "seenu",
age: 24,
},
];
const [data,setData]=useState(intialArray)
const handledelete =(id)=>{
const fliter = data.filter((e)=>{
return e.id !== id
})
setData(fliter)
}
return (
<div>
{
data.map((e)=>{
const {id,firstName,lastName,age}=e
return (
<div key={id}>
<div>{firstName}</div>
<div>{lastName}</div>
<div>{age}</div>
<button onClick={()=>handledelete(id)}>delete</button>
</div>
)
})
}
</div>
)
}
export default Usestate2
import React, { useState } from 'react'
const Usestate3 = () => {
const [name,setName]=useState("")
const [email,setEmail]=useState("")
const [phone,setPhone]=useState("")
const handlesubmite=(e)=>{
e.preventDefault();
const newobje ={
name :name,
email:email,
phone:phone
}
console.log(newobje)
}
return (
<div>
<form onSubmit={handlesubmite} >
<input
placeholder='enter your name'
type='text'
id ="ndame"
value={name}
onChange={(e)=>setName(e.target.value)}
/>
<input
placeholder='enter your name'
type='text'
id ="name"
value={email}
onChange={(e)=>setEmail(e.target.value)}
/>
<input
placeholder='enter your name'
type='text'
id ="named"
value={phone}
onChange={(e)=>setPhone(e.target.value)}
/>
<button type='submit'>submite</button>
</form>
</div>
)
}
export default Usestate3
import React, { useState } from 'react'
const Usestate4 = () => {
const [list ,setList]=useState([])
const [message,setMessage]=useState({
text:"",
id:" "
})
const [editingItem, setEditingItem] = useState({
id: "",
isEditing: false,
});
////////////Set-1///////////////////
const changesubmite =(e)=>{
setMessage({
...message,
text:e.target.value
})
}
/////////////Set-2///////////////////////////
const handlesubmite =(e)=>{
e.preventDefault()
let newobje ={
text :message.text,
id:new Date().getTime().toString()
}
setList([...list,newobje])
setMessage({
text:'',
id:''
})
console.log(newobje)
}
//////set-3/////////
const handledelete =(id)=>{
const fliter = list.filter((e)=>{
return e.id !== id
})
setList(fliter)
}
////////Set-4///////////////////////
const handleedite =(id)=>{
setEditingItem({
...editingItem,
id:id,
isEditing:true
})
let editingitem = list.find((e)=>{
return e.id === id
})
setMessage({
...message,
text:editingitem.text,
id:editingitem.id
})
}
///////Set-5////////////////
const handleeidtes =(e)=>{
e.preventDefault();
let newobjes = list.map((e)=>{
if(e.id=== editingItem.id){
return {
text:message.text,
id :editingItem.id
}
}else{
return e
}
})
setList(newobjes)
setMessage({
text: "",
id: "",
})
setEditingItem({
id: "",
isEditing: false,
});
}
return (
<div>
<input
placeholder='enter ur name'
type="text"
id='ww'
value={message.text}
onChange={changesubmite}
/>
{
editingItem.isEditing ?(
<button onClick={handleeidtes}>edite</button>
):(
<button onClick={handlesubmite}>add</button>
)
}
<hr/>
{list.length === 0 && <h4>There is no items in the list</h4>}
{
list.map((e)=>{
const {id ,text}= e
return (
<div key={id}>
{text}
<button onClick={()=>handledelete(id)}>delete</button>
<button onClick={()=>handleedite(id)}>edite</button>
</div>
)
})
}
</div>
)
}
export default Usestate4
///////////////////////////////////////useReducer/////////////////
import React, { useEffect, useReducer, useState } from 'react'
///////////set =3///////////
const reducer =(state,action)=>{
if(action.type ==="UPDATE_USERS_DATA"){
return {
...state,
userdata:action.payload
}
}
/////Loading////////
if(action.type==="Loading"){
return {
...state,
isloading :action.paylooad
}
}
////////////////////////
////step5////////
if(action.type ==="DELETE_USER"){
const userdelete = state.userdata.filter((e)=>
e.id !== action.payload
)
return{
...state,
userdata :userdelete
}
}
/////step=6/////
if(action.type ==="ONCLICK_EDIT"){
return{
...state,
isEditing: action.payload,
}
}
//////step=7/////
if(action.type==="UPDATE_USER"){
const newuser = state.userdata.map((e)=>{
if(e.id===action.payload.id){
return {
id:action.payload.id,
name:action.payload.name,
email:action.payload.email,
}
}else{
return e
}
})
return{
...state,
userdata:newuser
}
}
return state
}
const Reducer = () => {
const featch = async()=>{
dispatch({type:"Loading",paylooad:true})
dispatch({type:"ERROR",payload :{status:false,msg:""}})
console.log("responce")
try {
//////set-3//////
const responce =await fetch("https://jsonplaceholder.typicode.com/users")
const datas = await responce.json()
dispatch({type:"UPDATE_USERS_DATA", payload :datas})
dispatch({type:"Loading", payload :{status:false,msg:''}})
} catch (error) {
dispatch({type:"Loading",payload:false})
dispatch({
type:"ERROR",
payload:{status:true,msg:error.message}
})
}
}
useEffect(()=>{
featch()
},[])
///////////////set=2///////////////////////
const initialState ={
userdata: [],
isloading :false,
isError :{status:false,msg:""},
isEditing :{status:false,id:"",name:"",email:""}
}
////////step-1////////
const [state,dispatch]= useReducer(reducer,initialState)
///////////////////////////////////////////////////////////////
////step5////////
const handledelete =(id)=>{
dispatch({type:"DELETE_USER",payload:id})
}
///////step-6/////
const updateuser = (id,name,email)=>{
dispatch({
type:"UPDATE_USER",
payload:{
id,
name,
email,
},
})
/////
dispatch({
type:"ONCLICK_EDIT",
payload:{status:false,id:"",name:'',email:''}
})
}
return (
<div>
{/* final step */}
<h2>Users Information</h2>
{state.isEditing?.status && (
<EditFormContainer
id={state.isEditing.id}
comingTitle={state.isEditing.name}
comingEmail={state.isEditing.email}
userdata={updateuser}
/>
)}
{/* ssssssssssssssssssssssssss */}
{
state?.userdata.map((eachUser)=>{
const { id, name, email } = eachUser
return(
<div key={id} style={{background:"lightblue"}}>
<h3>{name}</h3>
<h3>{email}</h3>
<button onClick={()=>handledelete(id)}>delete</button>
<button
onClick={()=>{
dispatch({
type:"ONCLICK_EDIT",
payload:{status:true,id:id ,name:name,email:email}
})
}}
>
edite
</button>
</div>
)
})
}
</div>
)
}
////////////step-7///////////
const EditFormContainer = ({id,comingTitle,comingEmail,userdata})=>{
const [title,setTitle] =useState(comingTitle ||"")
const [email,setEmail]=useState(comingEmail||"")
return(
<>
<form>
<input
type="text"
name="title"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<input
type="email"
name="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button onClick={() => userdata(id, title, email)}>
update data
</button>
</form>
</>
)
}
export default Reducer
///////////////////////////////////////useEffect/////////////////
export const Useffect = () => {
const [data ,setData] =useState([])
const [loading,setLoading] =useState(false)
const [iserr,setIserr]=useState({ status: false, msg: "" })
const featchs =async()=>{
setLoading(true)
setIserr({status: false, msg: "" })
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const datas = await response.json()
console.log(datas)
setData(datas)
setLoading(false)
setIserr({ status: false, msg: "" });
if(response.status===400){
throw new Error('data not found')
}
} catch (error) {
setLoading(false)
setIserr({
status: true,
msg:error.message || "something wet wrong " });
}
}
/////////////////////////////
useEffect(()=>{
featchs()
},[])
////////////////////////////////
if(loading){
return (<div>
<h2>is loading......</h2>
</div>)
}
////////////////////////
if(iserr?.status){
return(
<h3 style={{color:"red"}}> {iserr?.msg}</h3>
)
}
/////////////////////////
return (
<div>
{
data.map((e)=>{
const {id, name, email} =e
return <div key={id}>
{name}
{email}
</div>
})
}
</div>
)
}
Comments
Post a Comment