Posts

Add-Edit_delete

 import React, { useState } from "react"; function App() {   const [tasks, setTasks] = useState([]);   const [newTask, setNewTask] = useState("");   const [isEditing, setIsEditing] = useState(false);   const [currentTaskIndex, setCurrentTaskIndex] = useState(null);   const addTask = () => {     if (newTask.trim()) {       setTasks([...tasks, newTask]);       setNewTask("");     }   };   const editTask = (index) => {     setNewTask(tasks[index]); // Set the current task to the input field     setIsEditing(true);     setCurrentTaskIndex(index);   };   const saveTask = () => {     if (newTask.trim()) {       const updatedTasks = [...tasks];       updatedTasks[currentTaskIndex] = newTask;       setTasks(updatedTasks);       setNewTask("");       setIsEditing(false); ...
Post a Comment
Read more

counter_New counter

 import React, { useState } from 'react'; const Counter = () => {   const [counters, setCounters] = useState([0]);   // Function to add a new counter   const addCounter = () => {     setCounters([...counters, 0]);   };   // Function to handle increment   const increment = (index) => {     const newCounters = [...counters];     newCounters[index] += 1;     setCounters(newCounters);   };   // Function to handle decrement   const decrement = (index) => {     const newCounters = [...counters];     if (newCounters[index] > 0) {       newCounters[index] -= 1;     }     setCounters(newCounters);   };   return (     <div>       {counters.map((count, index) => (         <div key={index} style={{ marginBottom: '10px' }}>           <h3>Count...
Post a Comment
Read more

Controlled Form

 import React, { useState } from "react"; function Form() {   const [formData, setFormData] = useState({ name: "", email: "" });   const [submittedData, setSubmittedData] = useState(null);   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleSubmit = (e) => {     e.preventDefault();     setSubmittedData(formData);   };   return (     <div>       <h2>Controlled Form</h2>       <form onSubmit={handleSubmit}>         <input           type="text"           name="name"           placeholder="Name"           value={formData.name}           onChange={handleChange}         />      ...
Post a Comment
Read more

Today login

import React, { useState } from "react"; import axios from "axios"; const LoginPage = () => {   const [formData, setFormData] = useState({ email: "", password: "" });   const [errorMessage, setErrorMessage] = useState("");   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleLogin = async (e) => {     e.preventDefault();     try {       const response = await axios.post("http://localhost:5000/api/login", {         email: formData.email,         password: formData.password,       });       if (response.data.success) {         // Handle successful login         console.log("Login successful!");         // Redirect or store user info as needed       } else {     ...
Post a Comment
Read more

NodeJS MongoDB

 server.js const mongoose = require ( 'mongoose' ); const dotenv = require ( 'dotenv' ); dotenv . config ({ path : './config.env' }); const app = require ( './app' ); // Require the Express app from app.js const DB = process . env . DATABASE ; // Connect to the database-------------------------------------- mongoose     . connect ( "mongodb://localhost:27017/nikedb" , {         useNewUrlParser : true ,         useUnifiedTopology : true ,         // Other options if needed     })     . then (() => {         console . log ( 'Database connection successful' );     })     . catch (( err ) => {         console . error ( 'Database connection error:' , err );     }); const port = process . env . PORT || 3000 ; app . listen ( port , () => {     console . log ( `App running on port ${ port } ` ); ...
Post a Comment
Read more

Remove dup

 Search data from JSOn------------------------------------------------ function Search(){     const [searchItem, setsearchItem] = useState('')     return(         <>             <input type='text'                 placeholder="search..."                 onChange={(e)=>{setsearchItem(e.target.value)}}             />             {JSONDATA.filter((val)=>{                 if(searchItem == ""){                     return val                 }else if(val.first_name.toLowerCase().includes(searchItem.toLowerCase())){                     return val             ...
Post a Comment
Read more

To-do-list del edit save

  import React , { useReducer , useState } from ' react ' export default function MyExampleReducer () {     const myState = [];     const myReducer = ( state , action ) => {             switch ( action . type )             {                 case " ADD " :                 return [ ... state , action . payload ];                             case " Delete " :                 return state . filter (( d , index ) => {                     return index != action . payload ;                 });                 case " Save " :             ...
Post a Comment
Read more