its my middle component used in page.tsx. giving error here
"use client"
import React from 'react'
import { CiSearch } from 'react-icons/ci'
import { FaPlus } from 'react-icons/fa'
import Image from "next/image";
import { BsThreeDots } from 'react-icons/bs';
import friend4 from "../public/src/man 1.jpg"
import friend2 from "../public/src/girl 2.jpg"
import friend3 from "../public/src/man 2.jpg"
import friend1 from "../public/src/man 3.jpg"
import { HiPlus } from 'react-icons/hi';
import { useContext } from 'react';
import { Contexts, LocalSContext } from '../contexts/LocalSContext';
const Middle = () => {
const { setTask, desc, myapp, setDesc, setType, handleAddTodo, handleRemoveTodo } = useContext(Contexts)
// Blog Local----
return (
<div className=' w-[96%] flex flex-col '>
<div className='flex flex-row justify-between align-bottom h-20 '>
<p className='text-gray-600 text-lg flex items-center justify-center pl-12 '> Active Sprint</p>
<div className='bg-inherit w-1/4 border-b border-slate-300 h-[50%] mt-5 align-bottom justify-center align-center flex '>
<input className=' bg-inherit text-xs outline-none w-[70%]' placeholder="Search task ,project ,label ..." />
<CiSearch className=' w-[25px] h-[25px] mt-2 text-gray-400' />
</div>
</div>
<div className=' w-full min-h-screen bg-indigo-50 rounded-[40px] items-center flex flex-col '>
<div className='flex flex-row justify-between items-end h-[60px] w-[93%] '>
<div className=' flex flex-row gap-2 items-center'>
<Image
className=' w-[35px] h-[35px] rounded-full'
src={friend1}
alt='faceless'
/>
<Image
className=' w-[35px] h-[35px] rounded-full'
src={friend3}
alt='faceless'
/>
<Image
className=' w-[35px] h-[35px] rounded-full'
src={friend2}
alt='faceless'
/>
<Image
className=' w-[35px] h-[35px] rounded-full'
src={friend4}
alt='faceless'
/>
<button className=" w-[120px] shadow-lg text-sm font-semibold h-[30px] ml-3 shadow-gray-300 rounded-2xl bg-white text-black border-0 hover:bg-blue-200 hover:text-blue-600">
Invite People
</button>
</div>
<div className="">
<div className=" w-[142px] h-[42px] text-white border-0 flex rounded-full justify-center items-center bg-blue-600 hover:bg-white hover:text-blue-600">
<button
className=" flex flex-row items-center justify-between gap-3 "
>
<p className='text-[13px] font-semibold text-gray-200'>Create Task</p>
<div className='bg-blue-400 rounded-full w-[26px] h-[26px] flex items-center justify-center'>
<HiPlus className=" w-[16px] h-[16px] text-gray-200 " />
</div>
</button>
</div>
</div>
</div>
<div className='grid grid-flow-col grid-cols-4 w-full mt-1 justify-items-center h-auto gap-x-4 pl-5 pr-5 '>
{/* backlock */}
<div className='flex flex-col align-middle w-[100%] items-center'>
<div className='flex flex-col justify-center align-middle w-[90%] h-[100px] items-center'>
<button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pr-3 pl-3 rounded-xl items-center flex justify-between bg-white hover:bg-blue-200 hover:text-blue-600"
onClick={() =>
document.getElementById('my_modal_1').showModal()}
>
<p className='pl-1' id='Backlog' >Backlog</p>
<div className=' bg-blue-200 rounded-full w-[25px] h-[25px] flex items-center justify-center'>
<FaPlus className=" text-blue-400 " />
</div>
</button>
<dialog id="my_modal_1" className=" p-10 rounded-3xl bg-white ">
<div className=" flex flex-col gap-2">
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<select className="select w-full max-w-xs bg-blue-400 outline-none text-white rounded-2xl font-semibold "
onChange={(e) => setType(e.target.value)}>
<option disabled selected>Post type?</option>
<option id='backlog'>Backlog</option>
<option id='todo'>To Do</option>
<option id='inprogress'>In Progress</option>
<option id='completed'>Completed</option>
</select>
</div>
<div className="App">
<header className="App-header">
<div className="todo-input flex flex-col gap-5 pt-3 w-[70%]">
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<select className="select w-full max-w-xs border-none border-inherit bg-blue-400 outline-none text-white rounded-2xl font-semibold"
onChange={(e) => setTask(e.target.value)}>
<option disabled selected>Pick your Title.</option>
<option id='banner' className='bg-red-400'>Banner</option>
<option id='illustration'>Illustration</option>
<option id='video'>Video</option>
<option id='uiux'>UI UX</option>
</select>
</div>
<input
className='w-60% h-[20px] bg-white outline-none border-b-2 text-black'
id='Title'
type="text"
placeholder="Description"
value={desc}
onChange={(e) => setDesc(e.target.value)}
/>
<p className="py-4 text-gray-400">Press ESC key or click the button below to close</p>
<form method="dialog" className='flex flex-row gap-2'>
<button className="btn bg-blue-500 text-white border-0 outline-none hover:bg-white hover:text-black" onClick={handleAddTodo}>Add</button>
<button className="btn bg-blue-500 text-white border-0 outline-none hover:bg-white hover:text-black">Close</button>
</form>
</div>
</header>
</div>
</div>
</dialog>
</div>
<div className='flex flex-col justify-center w-full items-start '>
<ul className="todo-list items-center flex flex-col gap-5 w-full h-auto justify-center ">
{(myapp || [])?.map((blog: any, index: number) => {
if (blog.type === "Backlog") {
return <>
<div className='bg-white rounded-2xl flex shadow-lg shadow-gray-300 flex-col w-[90%] justify-center gap-4 items-center'>
<div className='flex flex-row mt-2 justify-between w-[90%] '>
<h1 className='text-black w-[90%] '>
<li className=' text-gray-700 md:break-words w-[90%] mb-3 flex flex-row text-xs justify-between items-center rounded-lg' id={blog.title} key={index}>
{blog.title}
{/* {JSON.stringify(_cards)} */}
</li>
</h1>
<button className=" text-gray-300 items-center flex justify-center w-[10%] h-[20px] " onClick={() => handleRemoveTodo(index)}>
<BsThreeDots />
</button>
</div>
<li className=' text-gray-700 md:break-words w-[90%] mb-3 flex flex-row text-xs justify-between items-center rounded-lg' id={blog.desc} key={`blog-${index}`}>
{blog.desc}
</li>
</div>
</>;
}
}
)}
</ul>
</div>
</div>
its my context file in contexts folder
'use client'
import { createContext, useEffect, useState,Provider } from "react";
import React from 'react'
import Middle from "../component/Middle";
const Contexts =createContext()
function LocalSContext() {
const [task, setTask] = useState('');
const [tyPe, setType] = useState('');
const [desc, setDesc] = useState('');
const blog = {
"type": tyPe,
"title": task,
"desc": desc
}
//localstorage aas todonuudig awah
const [myapp, setMypp] = useState(() => {
if (typeof window !== 'undefined') {
return JSON.parse(localStorage.getItem('myApp')) || [];
}
})
useEffect(() => {
localStorage.setItem('myApp', JSON.stringify(myapp))
}, [myapp])
// todo nemegdeh
const handleAddTodo = () => {
if (myapp !== null) {
setMypp([...myapp, blog]);
setDesc('')
}
};
const handleRemoveTodo = (index: number) => {
const newTodos = myapp.filter((_, i) => i !== index);
setMypp(newTodos);
};
return (
<Contexts.Provider value={{setTask, desc, myapp, setDesc, setType, handleAddTodo, handleRemoveTodo}}>
<Middle/>
</Contexts.Provider>
)
}
export {Contexts,LocalSContext}
const { setTask, desc, myapp, setDesc, setType, handleAddTodo, handleRemoveTodo } = useContext(Contexts)
giving error on values –
TypeError: Cannot destructure property ‘setTask’ of ‘(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(…)’ as it is undefined.
at Middle (./app/component/Middle.tsx:33:13)
digest: “44794283”
23 |
24 |
25 | const { setTask, desc, myapp, setDesc, setType, handleAddTodo, handleRemoveTodo } = useContext(Contexts)
| ^
26 |
27 | // Blog Local—-
28 |
GET / 500 in 939ms
And in my page —
Unhandled Runtime Error
TypeError: Right side of assignment cannot be destructured
Can you guys help me. sry English not good and im beginner.
New contributor
orgil naranhuu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.