Blog has max-w and overflow so it can’t show full text. I used NextUI’s Modal so I can see the full post.
const TaskM = () => {
const { myapp, handleRemoveTodo, desc, handleAddTodo, blog,tyPe,task } = useContext(Context);
const { isOpen, onOpen, onOpenChange } = useDisclosure();
const [scrollBehavior, setScrollBehavior] = React.useState("inside");
const [modalPlacement, setModalPlacement] = React.useState("center");
const modal =(_index: any)=>{
document.getElementById("hello")
}
return (
<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 <>
<Button onPress={onOpen}
key={index} className='bg-white min-h-[100px] h-auto rounded-2xl flex shadow-lg shadow-gray-300 md:break-words flex-col w-[90%] justify-start gap-4 items-center'>
<div className='flex flex-row mt-2 justify-between w-[90%] '>
<h1 className='text-black w-[90%] '>
<li className={`block text-gray-700 md:break-words w-[90%] mb-3 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>
<div className='w-full h-auto flex flex-col justify-start items-center rounded-none'>
<li className=' text-gray-700 h-auto max-h-[160px] max-w-[90%] text-wrap capitalize overflow-ellipsis overflow-hidden break-all w-[90%] mb-3 flex flex-row text-xs justify-start items-start rounded-lg' id={blog.desc} key={index}>
{blog.desc}
</li>
</div>
</Button>
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
scrollBehavior={scrollBehavior}
placplacement={modalPlacement}
key={index}
id ='hello'
>
<ModalContent
>
{(onClose) => (
<>
<div className='bg-white min-h-[100px] h-auto rounded-2xl text-black flex shadow-lg shadow-gray-300 md:break-words flex-col w-full justify-start gap-4 items-center'>
<ModalHeader className="flex flex-col gap-1 ">
{blog.type}
</ModalHeader>
<h1 className='text-black w-[90%] '>
<li className={`block text-gray-700 md:break-words w-[90%] mb-3 flex-row text-xs justify-between items-center rounded-lg `} id={blog.title} key={index}>
{blog.title}
{/* {JSON.stringify(_cards)} */}
</li>
</h1>
<ModalBody className='flex justify-start items-start w-full'>
<div className='w-full h-auto flex flex-col justify-start items-start rounded-none'>
<li className=' text-gray-700 h-auto max-h-[210px] max-w-[90%] text-wrap capitalize break-all w-[90%] mb-3 flex flex-row text-xs justify-start items-start rounded-lg' id={blog.desc} key={index}>
{blog.desc}
</li>
</div>
</ModalBody>
<ModalFooter>
<Button
color="danger"
variant="light"
onPress={onClose}
className="p-2 rounded-2xl w-auto bg-blue-500 text-white border-0 outline-none hover:bg-blue-400 "
>
Close
</Button>
</ModalFooter>
</div>
</>
)}
</ModalContent>
</Modal>
</>;
}
}
)}
</ul>
</div>
)
}
export default TaskM
THIS component is for post my blog. When I click on the posted blog , onpress={onOpen} calling every modals of every blog at the same time. I copied this modal code from NextUI Modal. So I don’t know what to do and how to fix it. I think I should give id on every blogs but I don’t know how to do it. Because every blogs are posted from 1 component.