I want to display default value="playlist" and when the user click it replace with default value, show the props values.
Right now its show the props value when i click the menu but i want to show the playlist name there and then its switch the value/name with props when user click menu
var defaultValue="playlist";
return (
<div className="mainContent">
<div className="tableHeaderBody">
<div className="TableText">{props.val}</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
</div>
</div>
You can define the prop value as state, and setState when you call the onClick function.
const [playlist, setPlaylist] = useState("playlist");
return (
<div className="mainContent">
<div className="tableHeaderBody">
<div className="TableText">{playlist}</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
</div>
</div>
And from wherever you call onCLick, define like this
OnClick={()=>setPlaylist(props.val)}
Related
New to coding, trying to get a modal to work. It is not opening the way I expected it to.
The component is currently loaded within the footer div of my site. And when the button is toggled it simply hides or shows a div within the footer. I want it to appear in the centre of the webpage as a modal.
import React, {useState} from 'react';
import './policy.css'
export default function Policy() {
const [modal, setModal] = useState(false);
const toggleModal = () => {
setModal(!modal);
};
if(modal) {
document.body.classList.add('active-modal')
} else {
document.body.classList.remove('active-modal')
}
return (
<>
<div>
<button onClick={toggleModal} className='btn-modal'>
<p>Privacy Policy</p>
</button>
</div>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Privacy Policy</h2>
<p>This is the privacy policy</p>
<button className='close-modal' onClick={toggleModal}>Close</button>
</div>
</div>
)}
</>
);
}
The simplest way to achieve a modal effect is to use some CSS.
You could try a very crude style like (from MUI Modal docs):
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "lightgrey",
border: "2px solid #000",
boxShadow: 24,
padding: 4,
};
Then apply it to your modal:
<div className="modal" style={style}>
I am trying to render a TreeView with departments which have some organization structure, meaning each department has a parent. The problem is that sometimes my TreeView renders without any data in it. I can see the console log when rendering, but the function returns nothing, even the HTML structure remains empty. onItemRendered apparently works as the node has an orange color.
One thing I have noticed is that when the tree is "empty" and I click on the node which is descendant of the orange node then it collapses/expands but nothing renders - but if I expand any other root node except the orange one then the tree renders all the data fine.
<TreeView
// key={counter}
items={items}
dataStructure="plain"
displayExpr="ouName"
parentIdExpr="ouParentExternalKey"
expandedExpr="expanded"
onItemClick={(tree) => onItemClick(tree)}
keyExpr="ouExternalKey"
searchMode={'contains'}
searchEnabled={true}
searchExpr={searchExpr}
selectByClick={false}
// virtualModeEnabled={true}
itemRender={(params) => itemRender(params)}
onItemRendered={(e) => onItemRendered(e)}
width={400}
/>
const itemRender = (organization) => {
console.log("Line129", organization);
const organizationHasManager = organization.manager !== null || organization.alternate !== null;
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<div>
<span>{organization.ouCode}</span>
<span
className={`${styles.utvarNazev} utvar_nazev`}
style={{marginLeft: '10px'}}
onClick={() => onDepartmentTitleClick(organization)}
>
{organization.ouName}
</span>
</div>
<Icon
className='icon_people_expander'
iconName="People"
onClick={() => onShowPeopleFromDepartment(organization)}
style={{ marginLeft: "15px", cursor: "pointer", position: 'relative', top: '5px' }}
/>
</div>
{organizationHasManager &&
<div style={{display: 'flex', flexDirection: 'row'}}>
{organization.manager &&
<span style={{whiteSpace: 'nowrap'}} className={styles.spanManager} onClick={() => onManagerClick(organization.manager)}>
{organization.manager.displayName}
</span>
}
{organization.alternate &&
<span style={{marginLeft: '10px', whiteSpace: 'nowrap'}} className={styles.spanManager} onClick={() => onAlternateClick(organization.alternate)}>
{`(${organization.alternate.displayName})`}
</span>
}
</div>
}
</div>
);
};
Code:-
const [Close, setClose] = useState(true)
<div className="allDivs">
{item.map((item, index) => {
// console.log("myDivs", myDivs);
return (
<Fragment key={index} >
<div className="tableHeaderBody" id="CLOSEDIV" style={{display: Close ? 'initial' : 'none'}}>
<div className="TableText">
<div className="TableTextHide"></div> <div style={{ color: "white" }} id="SHOW">{item.val}</div></div>
<div className="CloseIcon" id="CloseBtn"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} onClick={() => setClose(false)} /></div>
</div>
</Fragment>
)
})
}
</div>
I want that when i click the Red circle at any div (show in image) it close the div, but right now when i click the One div red circle its closes all the div
please help.
Try this:
Create a new component ChildComponent:
export default function ChildComponent({item}) {
const [Close, setClose] = useState(true) // Every Child now has it's own setClose controll
return (
<Fragment>
<div className="tableHeaderBody" id="CLOSEDIV" style={{display: Close ? 'initial' : 'none'}}>
<div className="TableText">
<div className="TableTextHide"></div>
<div style={{ color: "white" }} id="SHOW">{item.val}</div>
</div>
<div className="CloseIcon" id="CloseBtn">
<FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} onClick={() => setClose(false)} />
</div>
</div>
</Fragment>
)
}
Pass the ChildComponent to your component shown above:
<div className="allDivs">
{item.map((item, index) => (
<div key={index}>
<ChildComponent item={item} />
</div>
))}
</div>
I want to highlight the selected menu item, can anyone help?
<div className="scrollmenu" style={{ display: "flex" }}>
{
category.map((item) => (
<div className="menu__wrapper">
<menu
onClick={() => { showCat(item.id); showCatName(item.name); }}
className="mobile-cat-menu"
// style={{ float: "right", cursor: "pointer", paddingLeft: "0px", margin: "0px" }}
>
{item.name}
</menu>
</div>
))}
</div>
You can change the className depending on the selected element, and use CSS to highlight it.
For example, let's assume that you want to highlight a cat called Supercat:
<div className = "scrollmenu" style = {{ display: "flex" }}>
{
category.map((item) => (
<div className = "menu__wrapper">
<menu
onClick = {() => { showCat(item.id); showCatName(item.name); }}
className = "mobile-cat-menu"
>
<div className = { item.name === "Supercat" ? "highlight" : "not__highlight" }>
{item.name}
</div>
</menu>
</div>
))
}
</div>
Then use CSS:
.highlight{
background: red;
}
.not__highlight{
background: transparent;
}
I need to dynamically define the size of HTML element and set its height to component. I tried to do this with useRef but it doesn't work as expected because of state which contains the previous value (not the current one). Could someone help me with this?
And here's the link: CodeSandBox https://codesandbox.io/s/happy-water-fzqk8?file=/src/App.js
The below code works fine but there's hardcored variable HEIGHT which defines the height of a tab. My task is to make the height dynamic
import { useState } from 'react';
const HEIGHT = {
0: 200,
1: 400,
2: 800,
}
function App() {
const [tab, setTab] = useState(0);
const switchTab = (id) => {
setTab(id);
};
return (
<div
style={{
margin: '100px auto',
backgroundColor: 'pink',
width: '400px',
overflow: 'hidden',
height: HEIGHT[tab], // need this to be dynamic not hardcored
}}
>
<div>
{tab === 0 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 1</h2>
<input />
<button onClick={() => switchTab(1)}>Go to tab 2</button>
<p>Some text here</p>
</div>
)}
{tab === 1 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 2</h2>
<input />
<button onClick={() => switchTab(0)}>Go to tab 1</button>
<button onClick={() => switchTab(2)}>Go to tab 3</button>
<p>
Some more text here. Some more text here. Some more text here. Some more text here.
Some more text here. Some more text here. Some more text here
</p>
</div>
)}
{tab === 2 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 3</h2>
<input />
<button onClick={() => switchTab(0)}>Go to tab 1</button>
<button onClick={() => switchTab(1)}>Go to tab 2</button>
</div>
)}
</div>
</div>
);
}
What I tried:
Added useRef and state which holds the element height
const elRef = useRef(0);
const [height, setHeight] = useState(elRef.current.offsetHeight);
Added function which calculates the size of an element and then sets it to state variable
const resizeHeight = useCallback(() => {
const size = elRef.current.offsetHeight;
setHeight(size)
}, [elRef]);
Added state Height to styles this way
<div
style={{
margin: '100px auto',
backgroundColor: 'pink',
width: '400px',
overflow: 'hidden',
height: height, // it should be the element size
}}
>
It doesn't work((
Here's the link...with the state height - undefined
https://codesandbox.io/s/objective-brown-zq7ih?file=/src/App.js
You can easily update your elRef reference in the switchTab handler without using useEffect and any useCallback hooks:
const elRef = useRef(0);
const SwitchTab = (id) => {
setTab(id);
setHeight(elRef.current.offsetHeight)
};
Now pass the elRef to the ref property of your target div:
return (
<div
style={{
margin: '100px auto',
backgroundColor: 'pink',
width: '400px',
overflow: 'hidden',
height: HEIGHT[tab],
}}
>
<div ref={elRef}> // ------------------------> added here
{tab === 0 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 1</h2>
<input />
<button onClick={() => switchTab(1)}>Go to tab 2</button>
<p>Some text here</p>
</div>
)}
{tab === 1 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 2</h2>
<input />
<button onClick={() => switchTab(0)}>Go to tab 1</button>
<button onClick={() => switchTab(2)}>Go to tab 3</button>
<p>
Some more text here. Some more text here. Some more text here. Some more text here.
Some more text here. Some more text here. Some more text here
</p>
</div>
)}
{tab === 2 && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2>Tab 3</h2>
<input />
<button onClick={() => switchTab(0)}>Go to tab 1</button>
<button onClick={() => switchTab(1)}>Go to tab 2</button>
</div>
)}
</div>
</div>
);