Manage Dynamically Created Component in React
Dailywork.js
//////////////////////////////////
import React ,{useState, useEffect} from "react";
import axios from "axios";
import Dailyworkdetails from './Dailyworkdetails'
import Reacttoexcel from "./Reactttoexcel";
import dayjs from "dayjs";
function Dailywork(){
const [holyday,setHolyday]=useState([])
const [batchinfo,setBatchinfo]=useState([])
const [coursehinfo,setCourseinfo]=useState([])
const [filterbatchDetails,setFilterbatchDetails]=useState([])
const [selectedCourse, setSelectedCourse] = useState("");
const [selectedBatch, setSelectedBatch] = useState("");
const [tempbatch,setTempbatch]=useState()
useEffect(()=>{
axios.get('http://127.0.0.1:8000/batchlist/')
.then((res)=>{setBatchinfo(res.data);})
.catch((error) => {
console.error("Error fetching data:", error);
});
axios.get('http://127.0.0.1:8000/courselist/')
.then((res)=>{setCourseinfo(res.data);})
.catch((error) => {
console.error("Error fetching data:", error);
});
},[])
const handleCourseChange = (e) => {
setSelectedCourse(e.target.value);
};
const handleBatchChange = (e) => {
setSelectedBatch(e.target.value);
};
const handleDaily=()=>{
//const filterdetails = batchinfo.filter(batch => (batch.course_code===selectedCourse));
const filterdetails = batchinfo.filter((batch) => ((batch.course_code===selectedCourse)&&(batch.batch_number === parseInt(selectedBatch))));
// Update state using the functional form of setState to ensure correct state updates
setFilterbatchDetails(prevFilterbatchDetails => [...prevFilterbatchDetails, filterdetails]);
//console.log(filterbatchDetails);
}
const filteredBatches = batchinfo.filter(batch => batch.course_code === selectedCourse);
useEffect(() => {
}, [filterbatchDetails]);
const changeHolyday=(e)=>{
const x=dayjs(e.target.value).format('YYYY-MM-DD')
setHolyday(prevHolyday=>[...prevHolyday,x])
}
const removeHolyDay=()=>{
setHolyday(holyday.slice(0,-1));
}
return(
<>
<h1>Dailywork</h1>
<span>Course</span>
<select className="border p-1 m-1" onChange={handleCourseChange}>
<option value={''}>--</option>
{
coursehinfo.map((item)=>(<option key={item.id} value={item.code}>{item.code}</option>))
}
</select>
<span>Batch</span>
<select className="border p-1 m-1" onChange={handleBatchChange}>
<option value={0}>0</option>
{
filteredBatches.map((batch)=>(<option key={batch.id} value={batch.batch_number}>{batch.batch_number}</option>))
}
</select>
Holy day : <input type="date" value={''} onChange={changeHolyday} className="border" required/>
<button className="bg-black text-white p-1 m-2 rounded-lg" onClick={handleDaily}>Next</button>
<br/>
{
holyday.map((item)=><span key={item.id} className="bg-zinc-300 rounded-lg p-1 m-1">{dayjs(item).format('DD-MM-YYYY')}</span>)
}
{
holyday.length>0&& <button className="bg-black text-white rounded-lg p-1 m-1" onClick={removeHolyDay}>Remove Holyday</button>
}
<table className="m-2">
<tbody>
{
filterbatchDetails.length>0&& <Dailyworkdetails filterbatchDetails={filterbatchDetails} holyday={holyday}/>
}
</tbody>
</table>
</>
)
}
export default Dailywork;
Dailyworkdetails.js
///////////////////////////////////////////
import dayjs from "dayjs";
import React, { useEffect, useState } from "react";
import axios from "axios";
import Inputfield from "./Inputfield";
import { type } from "@testing-library/user-event/dist/type";
function Dailyworkdetails({filterbatchDetails, holyday}) {
const [classday, setClassday] = useState([]);
const [dailyroutine, setDailyroutine]=useState([{classdate:'',course_code:'',batch_number:'',s1topics:'',s1trainer:'',s1room:'',s2topics:'',s2trainer:'',s2room:'',s3topics:'',s3trainer:'',s3room:'',s4topics:'',s4trainer:'',s4room:'',s5topics:'',s5trainer:'',s5room:''}])
useEffect(() => {
const daylist = () => {
const start = new Date(filterbatchDetails[0][0].start_date);
const end = new Date(filterbatchDetails[0][0].end_date);
const days = [];
for (let date = start; date <= end; date.setDate(date.getDate() + 1)) {
const formattedDate=dayjs(date).format('YYYY-MM-DD');
if(!holyday.includes(formattedDate)){
days.push(formattedDate);
}
}
setClassday(days);
const updatedRoutine = days.map((formattedDate, index) => ({
classdate: formattedDate,
course_code: filterbatchDetails[0][0].course_code,
batch_number: filterbatchDetails[0][0].batch_number,
...dailyroutine[index],
}));
setDailyroutine(updatedRoutine);
};
daylist();
}, [filterbatchDetails]);
const SeveData=(index)=>{
axios.post('http://localhost:8000/dailyworkcreate/',dailyroutine[index])
.then((res)=>{
//window.location.reload()
})
.catch((error) => {console.error("Error Insert data:", error);});
console.log(dailyroutine[index])
}
return (
<>
{/* <td>{dayjs(filterbatchDetails[0][0].start_date).format('DD-MM-YYYY')}</td> */}
<tr>
<td className="border border-2 border-b-red-800 p-1 text-center">Sl No.</td>
<td className="border border-2 border-b-red-800 p-1 text-center">Action</td>
<td className="border border-2 border-b-red-800 p-1 text-center">Date</td>
{
filterbatchDetails[0][0].timeframevalue.split(',').map((item,i)=>(<td className="border border-2 border-b-red-800 p-1 text-center">{item.split('-')[0]}</td>))
}
</tr>
{
classday.map((day, index) => (
<tr key={index} className="border border-1">
<td className="border border-2 border-b-red-800 p-1 text-center">
<span>{index+1}</span>
</td>
<td className="border border-2 border-b-red-800 p-1 text-center">
<input type="button" onClick={(e)=>SeveData(index)} className="text-white bg-black rounded-lg p-1 w-[60px] cursor-pointer" value={'Save'}/>
<input type="button" className="text-white bg-black rounded-lg p-1 w-[60px] mt-1 cursor-pointer" value={'Delete'}/>
</td>
<td className={"border border-1 border-b-red-800 text-center w-[100px]"} >{dayjs(day).format('DD-MM-YYYY')}</td>
{
filterbatchDetails[0][0].timeframevalue.split(',').map((item,i)=>(
<td className="border border-1 border-b-red-800 p-1 text-center">
<Inputfield key={i} row={index} col={i+1} dailyroutine={dailyroutine} setDailyroutine={setDailyroutine}/>
</td>
))
}
</tr>
))
}
</>
);
}
export default Dailyworkdetails;
////////////////////////////////////////
Inputfield.js
///////////////////////////////
import React from 'react'
export default function Inputfield({row,col,dailyroutine,setDailyroutine}) {
const handlechange = (e) => {
const { name, value } = e.target;
setDailyroutine((prevDailyroutine) => {
const updatedDailyroutine = [...prevDailyroutine];
updatedDailyroutine[row] = {
...updatedDailyroutine[row],
[name]: value,
};
return updatedDailyroutine;
});
}
return (
<div>
<textarea name={`s${col}topics`} className="border border-1 border-b-lime-500 w-full" placeholder="Topics" value={dailyroutine[`s${col}topics`]} onChange={handlechange} required/>
<input name={`s${col}trainer`} type="text" className="border border-1 border-b-lime-500 w-full" placeholder="Trainer" value={dailyroutine[`s${col}trainer`]} onChange={handlechange} />
<input name={`s${col}room`} type="text" className="border border-1 border-b-lime-500 w-full" placeholder="Room" value={dailyroutine[`s${col}room`]} onChange={handlechange}/>
</div>
)
}
Comments
Post a Comment