I have a nextjs blog that I'm working on and one of the components I'm using is this card component:
function Card(props) {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div
className="uk-grid-small uk-flex-middle"
uk-grid
uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
>
<div className="uk-width-auto">
<Image
alt="Profile Picture"
className="uk-border-circle"
src={props.pic}
height={200}
width={200}
/>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">
{props.name}
</h3>
</div>
</div>
</div>
<div className="uk-card-body">
<p>{props.description}</p>
</div>
<div className="uk-card-footer">
</div>
</div>
)
}
I take that component and use it in the page like so:
export default Main =()=> {
return(
<Card
pic={placeholderpic}
linkedin='https://www.linkedin.com/'
name="Harry Truman"
description="Lorem ipsum"
/>
)
}
The icon in the footer does not render until the page is refreshed 3-4 times. All the rest of the card renders properly on first load. Ideally I'd like to know 3 things:
A. Why this is occurring?
B. How to troubleshoot this in the future?
C. What the most appropriate fix is for this.
Edit:
This question is essentially the same as mine:
Uikit Icons with React and Next.js
The solution for me is less than ideal, I don't want to wrap everything in a custom "UIKit" component.
Related
I have a carousel of cards. And each card has some data which if I click on the button on the card. I want to render the details of that particular card in different components on a different page which is item-details.
How do I achieve this in class components? There is an id in the map can I send using that in the details page where I am trying to render the full details of the card.
{this.state.data.map((item, idx) => {
return (
<div key={`edth_${idx}`} className="col-12 col-sm-6 col-lg-4 item explore-item" data-groups={item.group}>
<div className="card">
<div className="image-over">
<img className="card-img-top" src={item.img} alt="" />
</div>
<div className="card-caption col-12 p-0">
<div className="card-body">
<a href="/item-details">
<h5 className="mb-0">{item.title}</h5>
</a>
<div className="card-bottom d-flex justify-content-between">
<span>{item.price}</span>
<span>{item.count}</span>
</div>
<Link to={{pathname: '/item-details',state: [{img:'item.img',count: 'item.count', title: 'item.title', price: 'item.price'}]}} className="btn btn-bordered-white btn-smaller mt-3"> <i className="icon-handbag mr-2" />Check it out</Link>
</div>
</div>
</div>
</div>
);
})}
</div>
I have added the Link from react router instead of, but I still don't know how to consume this in the component which will be in /item-details.
Found out that instead of useLocation, I can use with router in class components so...
Imported useRouter in the item-details page and consuming like this in the render():
render() {
const { location } = this.props;
return (
<div className="item-info">
{location && location.img && <div className="item-thumb text-center">
<img src={location.img} />
</div>}
);
By doing this, I am not getting any error. But the img is not showing.
React is generally used for a single paged application (i.e. you wouldn't be sending users to different URLS) unless you are using something like NEXT, React Router, etc. for handling different pages.
Instead of sending the user to another page, you would render a new component with the details sent as a prop.
But if you're asking how to send information from a component to another page, i would suggest you look into React Router, which is designed to do this.
I'm not sure if this is actually what you're asking though so please provide further details on what your project is made up of.
In my experience, the best way to handle this would be to set the URL query when the onClick() handler is run. The view would update & the details would be fetched as needed. That way if you your homepage is mysite.com you can get more details by visiting mysite.com/moreinfo.
To accomplish this, you can use react-router-dom history API:
import { useHistory } from "react-router-dom";
function myComponent() {
let history = useHistory();
function handleClick() {
history.push("/moreinfo");
}
return (
<button type="button" onClick={handleClick}>
View More Info
</button>
);
}
I am learning React and I have a problem that I don't know how to solve, so If you can please help me with it.
I want to create a simple react app, where I create 3 components with .map() method. I would like to pass the data to Head component that I can access to every single card separately.
I have used .map() method but all cards are on one page. Can I do that with .map() method, and pass data to nav component?
function Card(props) {
return (
<Router>
<div id="wrapper">
<Link to="#"><button id="request" href="#">
REQUEST
</button></Link>
<h1 id="naslov">{props.name}</h1>
<p>{props.key}</p>
<div id="povez">
<a id="srcek"><FiHeart /></a>
<button id="follow">Follow</button>
<a id="kocka"><FiExternalLink /></a>
</div>
<div>
<h4 className="he4der">ORIGIN</h4>
<button id="origin">COUNTRY</button>
</div>
<div>
<h4 className="he4der">GENRE</h4>
<button id="origin">ROCK</button>
</div>
<div>
<h4 className="he4der">SUBGENRES</h4>
<button id="origin">ROCK</button>
<button id="origin2">METAL</button>
</div>
<div>
<button id="origin">ROCK</button>
<a id="kocka2"><FiExternalLink /></a>
</div>
<div id="breaker"></div>
<div id="socialinks">
<div id="social">
<span id="sicon"><FaFacebookF /></span>
<span id="sicon"><FaTwitter /></span>
<span id="sicon"><FaInstagram /></span>
<span id="sicon"><FaSpotify /></span>
</div>
<div id="plus">
<a id="kocka2"><FiExternalLink /></a>
</div>
</div>
</div>
)
}
export default Card
I would like to pass artist_name to nav component, so that when I
click on that name I can access card component that is related to that
name/artist.
Instead of passing a single artist it may make more sense to use all_artists and map your links. If all_artists isn't available globally it can be passed as a prop.
const Head = (props) => {
return (
<div id="header">
<img src={Logo} id="logo" />
<ul>
{props.artists.map(({ artist_id, artist_name }) => (
<li key={artist_id}>
<Link to={`/artist/${artist_name}`}>{artist_name}</Link>
</li>
)}
</ul>
<div id="icns">
<i><FiSearch /></i>
<i><FiAlignJustify /></i>
</div>
</div>
)
}
Pass all_artists to Head and render a dynamic route to extract name from the path to be passed on to Card on the name prop. Notice the Router was moved here to provide a routing context for both the Link components in Head and the Route component in App.
function App() {
return (
<div className="App">
<Router>
<Head artists={all_artists} />
<Route
path="/artist/:name"
render={({ match: { params: { name } } }) => (
<Card name={name}>
)}
/>
</Router>
</div>
);
}
Card will need to utilize a lifecycle to "react" to any changes on the name prop, like fetching/loading specific artist data from an API endpoint or redux state.
You need to pass to your component(that is rendering the card) what is the artist_id( as props) that you want to display and then you could use find() array method to search/filter the object that you need inside the array since you already have the ID of the artist.
and you might want to use switch and map() method on your router if you want all artist to be in your navigation
something like this:
<Switch>
{ all_artists.map( artist =>
<Route path=`/{artist.id}` render={ <CardComponent clickedArtist={artist} /> }/>
)}
</Switch>
so basically i have these photos:
i have created a postItem component which is just the structure of the image and i'm calling it from the api.js component from data using .map
the problem is, i used bootstrap grid system and used row and col-lg-4 to display each 3 on one line but its not working.
postItem.js:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
function PostItem ({src,thumbnailUrl,onClick,title}) {
return (
<div className="container-fluid text-center">
<div className="row">
<div className="col-lg-4">
<img src={src} onClick={onClick} alt="small post"></img>
<div>{title}</div>
</div>
</div>
</div>
)}
export default PostItem;
api.js:
<div>
<div>{newPhotosLocally.map(picture =>
<PostItem
key={picture.id}
src={picture.thumbnailUrl}
thumbnailUrl={picture.thumbnailUrl}
onClick={() => showPicture(picture.url,picture.id,picture.title)}
title={picture.title}/>
)}</div>
</div>
hope you can help me guys i've been stuck on this for an entire day
you have to do something like this
<div className="col-lg-4 d-flex">
{newPhotosLocally.map(picture =>
<PostItem
key={picture.id}
src={picture.thumbnailUrl}
thumbnailUrl={picture.thumbnailUrl}
onClick={() => showPicture(picture.url, picture.id, picture.title)}
title={picture.title} />
)}
</div>
because the reason is everytime iterate loop thus it will every time create new row . this is the reason you didn't get your images not align even we added display flex property ..
now remove unnecessary code from image portion .
hope you'll get it .
Sorry in advance if I seem confused, it's because I am.
So from my App.js file which is like the main file where I call all my components and query my DB, which is then called by the index.js file.
this is my render method.
render() {
return (
<div className="site" >
{
!!!this.state.done ? (
<LoadingSVG />
) : (
<div className="page">
<div className="header-wrapper">
<Header data={this.state.dataHeader} />
</div>
<div className="project-list-wrapper">
<ProjectList data={this.state.dataProjects} />
</div>
</div>
)
}
</div >
)
}
Inside the Projectlist component I loop through every items and create a project.
render() {
return (
<div className="project-list module">
<div className="sectionTitle">Project I've worked on</div>
{this.props.data.map((res, i) => (
<div className="project-wrapper">
<div className="inner-ctn">
<div className="header">
<div className="number">0{res.id + 1}</div>
<div className="name">{res.nomProjet}</div>
</div>
<div className="item-ctn">
<div className="categ">{res.categProjet}</div>
<div className="roles">{res.roles}</div>
<div className="date">{res.date}</div>
</div>
</div>
</div>
))
}
</div>
);
}
What I want to do is with the use of transition-groups, render another component.. let's call it Project-1. Project 1 would refresh my App.js content so that the new component would render. But I can't do that since App.js is parent to ProjectList. I also want to keep a well structure project so I don't want to put everything in a single file..
I tried reading the documentation and basically every article about how to do this, I can't seem to wrap my mind around how this should work. This should be easy stuff, yet it's weirdly complicated to have a transition or even a link between two pages..
In my main component App.js, I have an array of data received from a redux store that looks like this:
[
{...}, {...}
]
Each object in the array contains information about a post (like a reddit post) that I map over to display as a preview card. Upon clicking that preview card, a modal card will display with a detailed view of the post.
// From App.js:
return (
<div className="entirePostList">
<NavBar />
<div className="postListContainer">
<div className="postListRow">
{posts.map((post) => (
<div key={post.id} onClick={this.openDetailsPostModal}>
<PostCard post={post} />
</div>
))}
</div>
</div>
<button className="newPostButton"
onClick={this.openCreatePostModal}>
<MdAddCircle />
</button>
<Modal // VIEW POST DETAILS MODAL
className='modal'
overlayClassName='createOverlay'
isOpen={detailsPostModalOpen}
onRequestClose={this.closeDetailsPostModal}
contentLabel='Modal'
>
<div>
{loadingDetailsPost === true
? <div>
<div className="postEditorBg" />
<Loading type='bubbles'
delay={200}
color='#fed80a'
className="loading"
width={120} />
</div>
: <div>
<div className="postEditorBg" />
<PostCardDetails />
</div>
}
</div>
</Modal>
In the <PostCardDetails /> component, I am receiving the same array of data from the redux store and mapping over it in the same way to display the data as UI. It displays correctly, but the problem is when I click a card preview, it displays the wrong detailed card (not the one you would expect based on the preview).
Here's the github repo in case more context is needed.
I'm beyond stuck on this - person who can answer this shall receive love and respect for eternity.