Develop Reference

Applying Tailwind overflow behavior to only one child element

I'm using Tailwind to style a React component called "BlurImage" which displays an image by default and then on hover removes the image and displays a button at the bottom of the component and a text box at the top that has overflow-y-auto behavior to allow for scrolling if the text grows too long.
By default, the overflow responsibility is given to the body as discussed here and so I need to give the parent top-level div of BlurImage overflow as well. This causes both the text and the button to be scrollable. Is there a way to avoid having the button scroll?
This seems like it should be a common situation - I can imagine using this concept to write self-contained components that have a header/footer and some scrollable content as well. Unfortunately, I can't find much addressing this in the Tailwind docs or online.
I appreciate any suggestions! Here is the component code that I currently have:
import Image from 'next/image';
import cn from 'classnames';
import { useState } from 'react';
import { ImageInfo } from '../../types/images';
import Button from './button';
import { useRouter } from 'next/router';
type BlurImageProps = {
image: ImageInfo;
};
const BlurImage = ({ image }: BlurImageProps): JSX.Element => {
const [isLoading, setLoading] = useState(true);
return (
<div className="group shrink-0 h-40 w-40 relative aspect-w-1 aspect-h-1 overflow-hidden rounded-lg xl:aspect-w-7 xl:aspect-h-8 drop-shadow-xl bg-black">
<Image
alt=""
src={image.url}
width={512}
height={512}
className={cn(
'flex h-full duration-700 ease-in-out group-hover:opacity-20',
{
'scale-110 blur-2xl grayscale': isLoading,
'scale-100 blur-0 grayscale-0': !isLoading,
},
)}
onLoadingComplete={() => setLoading(false)}
/>
{!isLoading && (
<div className="absolute bottom-0 left-0 overflow-y-scroll items-center justify-center w-full h-full align-middle text-center px-2 opacity-0 duration-700 ease-in-out group-hover:opacity-100">
<a href={image.url}>
<p className="text-base text-white mb-2">
{image.prompt}
</p>
</a>
<Button
className="flex-shrink-0 px-2 py-2 text-sm font-bold text-white rounded bg-green-500"
type="button"
text="click me"
isSubmit={true}
onClick={() => console.log("clicked")}
/>
</div>
)}
</div>
);
};
export default BlurImage;

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> The whole page is white

import React from 'react';
import { Link,Router } from 'react-router-dom';
const Navbar = () => {
return (
<div className='p-5 pb-0 flex flex-wrap sm:justify-between justify-center item-center border-b dark:border-gray-700 border-gray-200'>
<div className="w-screen flex justify-between items-center space-x-5">
<Link to="/">
<p className='text-2xl '>Not Google</p>
</Link>
</div>
</div>
)
}
export default Navbar

Your Navbar component should be a child (any nesting depth) of Router component. Please check where is your Router component (BrowserRouter, etc...)

Issue with Changing state from 1 React Component inside of another React component

I've been trying to change the 'ModalOn' state which is created inside of the medCardSong.js file, and I've been trying to change that state from inside of the 'SongModal.js' file, which is a child component inside of medCardSong.js.
I've inputted the changeState function 'SetModalOn' as a prop to the SongModal.js component, and i've tried changing the state through that.
Here's medCardSong.js:
import React, { useEffect } from 'react';
import { useState} from 'react';
import SongModal from '../modals/SongModal';
function MediumCardSong(props) {
const [ModalOn, SetModalOn] = useState(false);
function killme() {
SetModalOn(false);
console.log(7)
}
console.log(ModalOn)
return (
<div className={" flex flex-col m-2 overflow-hidden duration-300 w-52 " + (ModalOn
? 'transition-none' : 'hover:scale-105 transition-all')} onClick={() =>
{SetModalOn(true);}}>
<img className='object-cover rounded-3xl'
src="https://i0.wp.com/coolhunting.com/wp-content/uploads/2022/07/steve-lacy-
bad-habit.jpg?fit=586%2C586&ssl=1" alt="" />
<div className='pb-2'>
<div className='flex'>
<div className='px-2 pt-2 text-2xl font-bold text-gray-400'>#1</div>
<div className='pl-3 text-xl pt-2 text-white'>Mercury</div>
</div>
<div className='text-left pl-5 text-gray-500'>Steve Lacy</div>
</div>
{ModalOn && <SongModal CloseModal={killme} />}
</div>
);
}
export default MediumCardSong;
and here's SongModal.js:
import React from 'react'
function SongModal(props) {
// setTimeout(() => {props.CloseModal(false)}, 1000)
return (
<div className="bg-neutral-800 bg-opacity-60 fixed inset-0 z-50 backdrop-blur-sm">
<div className="flex h-screen justify-center items-center">
<div className="justify-center bg-neutral-700 py-12 px-24 border-4 border-
pearmint rounded-xl text-xl text-white" >
<button className='text-3xl text-white pr-24 pb-24'
onClick={() => {props.CloseModal()}} >X</button>
sad
</div>
</div>
</div>
)
};
export default SongModal;
The imported CloseModal function works as intended when it's applied outside of the jsx. For example, the "SetTimeOut" piece of code would work properly if it's uncommmented. However this doesn't happen when I call "CloseModal" inside of an Onclick event-handler, such as the call I did for the 'x' Button.
I've also used console.log to see if the button has been registering the clicks I make and it has been. So I'm confused as to why the props.CloseModal function does not work as intended inside the OnClick event listener. Please give advice if you can.

try to call it inside of a hook
function SongModal(props) {
const close = () => {
props.CloseModal()
}
return (
<div>
<button onClick={close}>Close Btn</button>
</div>
)
};
also check the following acritical
link

take out name of dynamically created cards react

I had created some cards from an array of objects, now I want to show popup data for each card differently.
here is my code of printing
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}
for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.
if I do the same onClick event inside the card component and log it prints all the cards names one by one
here is what is inside the card:
function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
setflowName(e);
return
}
console.log("loging name:",flowName);
return (
<div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
<div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg ">
<div className="flex justify-between">
<div className="flex flex-row align-center">
</div>
{single?.badge.map(badge=>(
<div className={"badge"} key={badge}>
<span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
</div>
) )}
</div>
<div className="flex justify-center">
<img src={single?.image} alt={single?.flowName} />
</div>
<div >
<div className={"mt-2 flex justify-center"}>
<h1>{single?.flowName}</h1>
</div>
</div>
</div>
</div>
) } export default Card

I suspect you're doing this when you're trying to pass a value:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}
Every time this is rendered, the function is invoked straight away, which causes another render and so on...
The solution is to wrap your handleClick call in another function:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}

open a dialogue box just like model but attached to the element

I am new to React Js, I want to open a drop down box which may contain buttons, input fields, e.t.c but the issue is that I have tried model dropdown and many solutions but that does not attach exactly to the bottom of the element opening the dropdown when it is clicked. Another problem is that the component it is contained is just max 50px height so the model should be floating over that component.
In the Image attached the box is opening when open is clicked and the upper blue strip component contain the code but its is displaying on both
just want the box that can contain elements and position exactly under the element it is opened by
import React from "react"
import UserTopBar from "./UserTopTab"
import BelowSection from "./BelowSection"
const Parent =()=>{
<UserTopBar />
<BelowSection />
}
export default Parent
//Top Bar
import React from 'react';
import Notification from '../Notification'
import { NavLink } from 'react-router-dom'
import { QuestionCircleFilled, CloseOutlined } from '#ant-design/icons';
class UserTopTab extends React.Component {
render() {
return (
<>
<div className="d-inline-flex" style={{ background: "#242F84", width: "100%", zIndex: "990" }}>
<NavLink to="/" className="Cambium ">
<p className="mb-0 px-2 White" >Title</p>
</NavLink>
<NavLink to="/AllSearches" className='tab my-auto TabStyle'>
<p className="mb-0 FS_20 px-2 White" >All Searches</p>
</NavLink>
<NavLink to="/AllSearches" className='tab my-auto TabStyle'>
<p className="mb-0 FS_20 px-2 White" >Untitled 1</p>
</NavLink>
{this is toogle button when clicked it will open a dialogue box attached to its bottom}
<button type="button" className="mb-0 FS_20 px-2 White" >Open +</button>
{*innerpart of the box*}
<Notification />
<p className="mb-0 Help"><QuestionCircleFilled /></p>
</div>
</>
);
}
}
export default UserTopTab;
//Second Section
import React from 'react';
const BelowSection =()=>{
<div>
<h1>bellow Section is displayed here </h1>
</div>
}
export default BelowSection

Replace the button that is used to open the box with the target button bellow you can do any thing inside the dialogue box that is opened
<div class="dropdown newTab">
<button type="button"
className="mb-0 FS_20 px-2 White Grey border-0 h-100 dropdown-toggle"
id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
style={{ backgroundColor: "#050A30" }} >Open +</button> //target from where you want to place the buton
<div class="dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
Your inner code to be in here that you
need to display in the Drop down Box
</div>
</div>