I have a bunch of cards and I would like to have transition with a delay on each item but couldn't really figure it out on how to implement this.
According to the documentation I have to use something like this:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
but I didn't really get what is as={List} doing there. That's why couldn't really go forward with my solution. Any help will be appreciated.
Here is what I have:
<Card.Group itemsPerRow={itemsPerRow} centered>
{data.map((e) => {
const dateToFormat = e.created_at;
const userIndex = data.indexOf(e);
return (
<Card raised>
<Image
src={readmeFiles[userIndex].image}
wrapped
size="large"
ui={false}
onClick={() => {
const index = data.indexOf(e);
clickHandler(index);
}}
/>
<Card.Content>
<Card.Header></Card.Header>
<Card.Meta>
<span className="date">{e.name}</span>
</Card.Meta>
<Card.Description>{e.description}</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="calendar alternate outline" />
Created: <Moment date={dateToFormat} fromNow />
</a>
</Card.Content>
</Card>
);
})}
The as={List} tells semantic to render this Transition.Group component as a List component, which serves as a parent to the List.Item components. Those will only render correctly if they have a List as parent. You can check the resulting html out here.
The following snippet:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
Generates the following html:
<div role="list" class="ui huge divided middle aligned list">
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/ade.jpg" class="ui avatar image" />
<div class="content"><div class="header">Ade</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/chris.jpg" class="ui avatar image" />
<div class="content"><div class="header">Chris</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/christian.jpg" class="ui avatar image" />
<div class="content"><div class="header">Christian</div></div>
</div>
</div>
As you can see the first div says role="List" and has the list css class added. In your case the parent would be the Card.Group component.
Related
I am trying to click images with using react-responsive-carousel. And on Click it should direct to the Link onClickItem. I have tried it with <Link> and <a>. Doesnt work.
const onClickItem = () => console.log('Item');
<Carousel
showStatus={false}
showThumbs={false}
autoPlay={true}
infiniteLoop={true}
swipeable={false}
emulateTouch={true}
//#ts-ignore
animationHandler="fade"
transitionTime={5000}
onClickItem={onClickItem}
>
{banners.map((banner) => (
<div className="block" key={banner.id}>
<Link href={banner.href}>
<a>
<div>
<Image src={banner.image} width={768} height={400} alt={'Banner image'} />
</div>
</a>
</Link>
</div>
))}
</Carousel>
How to detect on Click with this component?
define func on click
const doClick = (bannerId) => {console.log(bannerId)}
add some func in your map
{banners.map((banner) => ( <div onClick={doClick(banner.id)} className="block" key={banner.id}> <Link href={banner.href}> <a> <div> <Image src={banner.image} width={768} height={400} alt={'Banner image'} /> </div> </a> </Link> </div> ))}
Following a tutorial-
Console Warning:
componentWillUpdate has been renamed, and is not recommended for use. Move data fetching code or side effects to componentDidUpdate.Rename componentWillUpdate UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. Please update the following components: Identicon
At first, the app correctly displayed "Welcome Username", but after refreshing I got the warning on the console.
Now, when I type something into Username... and click on Set Nickname nothing happens.
I am expecting to see "Welcome Username"
<div className={styles.welcome}>Wecome {username}</div>
I do not think there is anything wrong with my handleSetUsername function, because it worked previously.
On the Moralis app I see that there are 4 users correctly connected from my Metamask account.
Sidebar.js
const {
isAuthenticated,
nickname,
setNickname,
username,
setUsername,
handleSetUsername,
} = useContext(AmazonContext)
return (
<div className={styles.container}>
<div className={styles.profile}>
{isAuthenticated && (
<>
<div className={styles.profilePicContainer}>
<Image
src={`https://avatars.dicebear.com/api/pixel-art/${username}.svg`}
alt='profile'
className={styles.profilePic}
height={100}
width={100}
/>
</div>
{!username ? (
<>
<div className={styles.username}>
<input
type='text'
placeholder='Username....'
className={styles.usernameInput}
value={nickname}
onChange={e => setNickname(e.target.value)}
/>
</div>
<button
className={styles.setNickname}
onClick={handleSetUsername}
>
Set Nickname
</button>
</>
) : (
<div>
<div className={styles.welcome}>Wecome {username}</div>
</div>
)}
</>
)}
<div className={styles.connectButton}>
<ConnectButton />
</div>
</div>
<div className={styles.menu}>
<Link href='/'>
<div className={styles.menuItem}>
<Image
src={logo}
height={30}
width={30}
className={styles.amazonLogo}
/>
My Amazon
<br /> Board
</div>
</Link>
<div className={styles.menuItem}>
<FaBox />
Collections
</div>
<div className={styles.menuItem}>
<BsFillBookmarkFill />
Saved
</div>
<div className={styles.menuItem}>
<BsFillPersonFill />
Profile
</div>
<Link href='/history'>
<div className={styles.menuItem}>
<AiOutlineHistory />
Transaction History
</div>
</Link>
</div>
<div className={styles.companyName}>
<Image src={logofull} alt='amazon' height={100} width={100} />
</div>
</div>
)
}
export default Sidebar
Hello I'm kinda noob with react and I don't know how to slice every 1 item into a new div and then display it on the page with grid grid-cols-2 gap-4 tailwindcss styling, so I'd like to have 2 colums and 2 items in each row. Right now even I apply this tailwindcss there is 1 column and every 1 item is on a new row ;/ So I got to slice every one item.title, item.coverImage.url in a new div?
export default function BlogPage({ items }) {
console.log(items);
return (
<div className="max-w-lg mx-auto">
{items?.map((item) => (
<div key={item.slug} className="grid grid-cols-2 gap-4">
<Link href={`/portfolio/${item.slug}`}>
<div>
<a>
{item.title}
<Image
src={item.coverImage.url}
height={item.coverImage.height}
width={item.coverImage.width}
/>
</a>
</div>
</Link>
</div>
))}
</div>
);
}
You just need to add class col-span-1 to the div to explicitly tell how much column-span it needs to occupy.
export default function BlogPage({ items }) {
console.log(items);
return (
<div className="max-w-lg mx-auto">
{items?.map((item) => (
<div key={item.slug} className="grid grid-cols-2 gap-4">
<Link href={`/portfolio/${item.slug}`}>
<div className="col-span-1">
<a>
{item.title}
<Image
src={item.coverImage.url}
height={item.coverImage.height}
width={item.coverImage.width}
/>
</a>
</div>
</Link>
</div>
))}
</div>
);
}
Lets say I have this CardHeader component and I want to receive a titleIcon props (which is a react component) like this:
export default function CardHeader({ title, cardContent, titleIcon }) {
return (
<S.MiddleContainer>
<div className="white-card">
<div className="campaign-title p-1">
<div className="d-flex justify-content-center align-items-center pt-1">
{titleIcon}
<span id="title">{title}</span>
</div>
<div className="pr-2">
<MdInfo color="#969FAA" size={28} />
</div>
</div>
<p id="border" />
<div className="campaign-information">
{cardContent}
</div>
</div>
</S.MiddleContainer>
This is where I pass the icon prop
import { MdInfo } from 'react-icons/md'
<Col md={3}>
<S.ProductContainer>
<CardHeader
title="Sponsors Channel"
icon="<MdInfo color="#969FAA" size={28} />"/>
<Card title="Mobile notification boost" />
</S.ProductContainer>
</Col>
What is the best way to approach this?
you can pass your icon as a React.Node (not as a string), like so :
<Col md={3}>
<S.ProductContainer>
<CardHeader
title="Sponsors Channel"
icon={<MdInfo color="#969FAA" size={28} />} />
<Card title="Mobile notification boost" />
</S.ProductContainer>
</Col>
And you will have access to it via props in CardHeader :
export default function CardHeader({ title, cardContent, icon }) {
return (
<S.MiddleContainer>
<div className="white-card">
<div className="campaign-title p-1">
<div className="d-flex justify-content-center align-items-center pt-1">
{icon}
<span id="title">{title}</span>
</div>
<div className="pr-2">
<MdInfo color="#969FAA" size={28} />
</div>
</div>
<p id="border" />
<div className="campaign-information">
{cardContent}
</div>
</div>
Here you are:
<CardHeader
title="Sponsors Channel"
titleIcon={<MdInfo color="#969FAA" size={28} />}
/>
I am having Issues with Materialize cards in react I want them to display side by side and instead they are displaying vertically one on top of the other. Any help would be much appreciated.
{this.state.players.length ? (
<Row className="basketball-BG">
<Col m={3}>
<div className="card-content">
<PlayersList>
{this.state.players.map(player => (
<PlayersInfo key={player._id}>
<Card className="card small'"
header={<CardTitle ></CardTitle>}>
<a className="player-card" href={"/players/" + player._id}>
<div className="card-content">
<h4>
{player.lName +" "}
{player.fName}
</h4>
<p>
{player.jersey}
</p>
<p>
{player.position}
</p>
</div>
</a>
<DeleteBtn onClick={() => this.deletePlayer(player._id)} />
</Card>
</PlayersInfo>
))}
</PlayersList>
</div>
</Col>
</Row>
) : (
<h3 className="center">You Dont Have any Players yet Add them to the roster</h3>
)}
You can use flex layouts
// in your component
<PlayersList class='row-wise-spread'>
</PlayersList>
In a css file
.row-wise-spread {
display: flex;
flex-direction: row;
}