I'm mapping over a data object in React, and need to be able to conditionally apply a class to a div if item.lead === true for either item.profile or item.noprofile. My current implementation is grabbing user data, but not sure how to apply a class with my current setup:
React Profile
<li key={i} className={classes.member}>
<a href={`mailto:${item.email}`}>
{item.profile ? (
<img
alt={item.name}
className={classes.profile}
src={item.profile}
/>
) : (
<div className={classes.noprofile}>
<span className={classes.initials}>
{item.firstName}
</span>
</div>
)}
<div className={classes.details}>
<div>
{item.firstName} {item.lastName}
</div>
<span>{item.title}</span>
</div>
</a>
</li>
JSS class that needs to be applied if a user is a lead (item.lead)
lead: {
"&:after": {
content: `'LEAD'`,
top: "5px",
position: "relative",
zIndex: "-1",
fontSize: "10px",
padding: "5px 4px 2px 4px",
}
}
You can use like this:
className={classes.profile + (item.lead && ' lead' || '')}
#Bhojendra's logic was close, but I discovered the logic needed to be as follows:
-for profiles with images: (item.lead === true && ${classes.profilelead}) || ""
-for those without: className={classes.noprofile + ((item.lead === true && ${classes.lead}) || "")}
Related
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'm having issue adding icon in front of the header title as according to the Ant design collapse docs, we can only add expandIcon either on the right or left and I wonder if I can do both. But the icon I want to add is static which won't change when I clicked on panel to expand. Here's the picture to illustrate my CustomCollapse.
Here's my code of my collapse:
//styled
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0 10px 0 0;
box-shadow: none;
background-color: #0e0304;
.ant-collapse-content {
background-color: #0e0304;
color: #b5b5b6;
}
.ant-collapse-header {
color: #b5b5b6;
}
}
`;
_______________________________________________________
<StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}>
<AntCollapse.Panel
{...props}
header={props.header}
showArrow={false}
bordered={false}
disabled={props.isFollowed}
key={props.panelID}
extra={
<span>
<div className={styles.extraContainer}>
{
!props.show && !props.isFollowed && props.panelID !== "1" && <img src={rewardIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> // show this box
}
{
props.show && !props.isFollowed && <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} /> // show this icon
}
{
props.isFollowed ? <img src={tickIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""
}
</div>
</span>
}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
In the extra API, I have added display of +10. So i'm wondering if I can still add an icon in front of the header title and what API should I use.
Try it:
JSX return
function createMarkup() {
return {__html: '<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a" /> abc'};
}
return (
<Collapse defaultActiveKey={["1"]} onChange={onChange}>
<Panel
header={<div dangerouslySetInnerHTML={createMarkup()} />}
showArrow={false}
key="1"
>
<p>123</p>
</Panel>
</Collapse>
)
result:
I have the following code:
{item && item.description && (
<Link
style={{ display: 'block', paddingBottom: '2px' }}
title="View Details"
onClick={() => setIsOpen(!isOpen)}
{...aria}
>
View Details
<Icon icon={isOpen ? 'collapse_arrow' : 'expand_arrow'}
marginLeft="5px"
verticalAlign="bottom"
/>
</Link>
)}
The problem is that item.description could be an empty tag and therefore the condition is met and a Link component is rendered when it actually shouldn't be.
How is the best way I could avoid this case?
Thanks in advance!
You could use a regex to check for empty tags.
function checkForEmptyTags(tags) {
if (!tags) return false;
const EMPTY_TAGS_REGEX = RegExp('<[^>]*>\s*<\/[^>]*>');
return EMPTY_TAGS_REGEX.test(tags);
}
{item && !checkForEmptyTags(item.description) && (
<Link
style={{ display: 'block', paddingBottom: '2px' }}
title="View Details"
onClick={() => setIsOpen(!isOpen)}
{...aria}
>
View Details
<Icon icon={isOpen ? 'collapse_arrow' : 'expand_arrow'}
marginLeft="5px"
verticalAlign="bottom"
/>
</Link>
)}
I am developing an app in React using redux, I set the reports (which is an array of objects), and the properties (another array of objects) both to the store. Then I do a properties.map(property =>(...more code)) but every time a property is created I need to check if the property.id_property is also in the reports.id_property. I have been trying to include a loop inside the property.id_property but it does not work
This is the properties map:
{properties.map(property => (
<div id="propertiesList"
key={property.id_property}
className="card my-2 ml-2 mainProperty"
style={{
maxWidth: "14rem",
maxHeight: "12rem",
cursor: "pointer"
}}
onClick={() => this.showPropertyDetails(property.id_property)}>
{property.photo_property === null || property.photo_property == "null"
? (
<img style={{ height: 100 }}
src="https://www.esididiomas.es/blog/wp-content/uploads/2018/08/casa.jpg"
className="card-img-top"
alt="...">
) : (
<img style={{ height: 100 }}
src={`${host}properties/${property.photo_property}`}
className="card-img-top"
alt="..."/>
)}
<div style={{backgroundColor: "rgb(70, 88, 102)", color: "white", textAlign: "center"}}
className="card-header card-bottomPart">
<div className="card-body">
<p style={{ fontSize: 14 }} className="card-title" {property.address_line1}</p>
</div>
</div>
</div>
))}
returns a boolean:
reports.some(item => item.id_property === property.id_property)
or if you need to return a value:
reports.find(item => item.id_property === property.id_property)
I am tasked with removing all inline css in my project. It is a React project with sass. I was able to remove all inline css and put in a separate "styles" directory except this one. I told my boss we can just leave it as it is minimal and makes the code more readable but he insists on removing it and putting in a separate file in the styles directory.
How would one go about doing this? Any and all help is appreciated.
****Here is the code**** (this is a snipet from a component file)
isLoggedIn ? (
<span
className='share-icon cursor'
style={
{
height: '20px',
width: '100px'
}
}
>
<img src={shareImage}/>
</span>
) : (
<span
className='people-icon cursor'
style={
{
height: '20px',
width: '100px'
}
}
>
<img src={groupImage}/>
</span>
Just create a class with these height and width values and use it in both cases:
isLoggedIn ? (
<span
className='share-icon cursor whatever-classname-makes-sense'>
<img src={shareImage}/>
</span>
) : (
<span
className='people-icon cursor whatever-classname-makes-sense'>
<img src={groupImage}/>
</span>
CSS:
.whatever-classname-makes-sense {
width: 100px;
height: 20px;
}