I would like to pass information through the Link tag to another component . However , i am unable to after watching several tutorials .
function Productscard(props) {
return (
<div className="item">
<Link to = "/products_info">
<div className="item_container">
<h3 className="subcategory_Tag"> {props.subcategory}</h3>
<h2 className="name_tag"> {props.name}</h2>
<img src={photo} alt="" className="photo" />
<h3 className="price_tag">$399.99 - $500</h3>
</div>
</Link>
</div>)
}
export default Productscard
There are several Productscard components being rendered on the page . Upon being clicked , they should take me to the products_info page and display product name and description . I have attempted unsuccessfully and below is my product_info component -
function Product_info(props) {
const params = useParams();
return (
<div className="product_info">
<h1>
{params.name}
</h1>
</div>
)
}
export default Product_info
I have also set the route in app js
<Route path="/products_info element={<Product_info />}/>
I have tried the above code unsuccessfully
I have created small nextjs page using wordpress REST API, Now react-hydration-error error show this page.I am using react html parser npm. How do I solve this error. could you please solve this error.
my code:
import Image from 'next/image'
import React ,{Component}from 'react'
import Link from 'next/link';
import { BiCalendar } from "react-icons/bi";
import ReactHtmlParser from 'react-html-parser';
export default class Blog extends Component{
constructor(props){
super(props);
this.state={
data: props.bloglist,
isLoading: true,
dataLoaded: false,
};
}
render(){
if (!this.state.data) {
return null;
}
console.log(this.state.data)
return(
<>
<div className="container blog-section">
<div className='row'>
<h2>Latest Posts</h2>
</div>
<div className='row'>
{
this.state.data.map(((x,i) =>(
<div className='col-md-4 boxs text-center' key={i}>
<div className='bg-info'>
<img src={x.images.large} className='img-fluid'/>
<h3>{x.title.rendered} </h3>
<p className='shopping'><span><BiCalendar/> {x.date}</span> </p>
{/* <p dangerouslySetInnerHTML={{__html: x.excerpt.rendered}}></p><span><BiShoppingBag/> {x.slug}</span> */}
<p class='expert'>{ReactHtmlParser(x.excerpt.rendered)}</p>
<Link href={"/blog"+"/"+x.slug+"/"+x.id } passHref={true}><p className='readmore'><span>Readmore </span></p></Link>
</div>
</div>
)))
}
</div>
</div>
</>
)
}
}
My original issues:
paragraph coming this format <p>If you have heard that there are ways to make money while shopping in the UAE and would lik</p> from API, So I converted to html.
I had this error, in my case I had <p> tag nested inside another <p> tag,
I was using Typography (MUI v5) to render text, switching to <Box> from <Typography> fixed the error.
We use components to build the React-based websites, These components are made using HTML tags. It is very important not to nest the same HTML elements.
For Example:
function Logo() {
return (
<Link href="/">
<a>
<Image
src="/images/logo.svg"
width={100}
height={75}
/>
</a>
</Link>
);
}
export default Logo;
Above is the Logo Component which has already the <a></a> tag inside it.
In this example, you will get the React Hydration Error if the <a> tag is used inside another <a> tag.
<a href="#">
<Logo />
</a>
So do not include the same HTML tags, which are hidden inside the
components to avoid react hydration error.
In my case I am using NextJS and I had a dropdown with react-select, the default value was changing after a small calculation, that does not like to nextjs, this is my previous code:
<Select options={seasons}
onChange={() => setSeason(e.value)}
defaultValue={seasons.find((x) => x.value == season) ? seasons.find((x) => x.value == season) : seasons[0]}
/>
So, I changed that calculation to the useEffect and initialized the react-select dropdown only when that value was calculated,now this is my current code that works:
{defaultSeason && (<Select options={seasons}
onChange={() => setSeason(e.value)}
defaultValue={defaultSeason}
/>)}
So, basically check that the defaultValue or anything else does not change after the html is sent to the client part in NextJS.
Follow these: https://nextjs.org/docs/messages/react-hydration-error
Or try deleting <a> within <Link> maybe.
My first code was this:
const isUserLoggedIn = is_user_logged_in()
// is_user_logged_in() checks for cookie of user token and returns boolean
Got the error about hydration
Then changed code to this:
const [isUserLoggedIn, setIsUserLoggedIn] = useState(null)
useEffect(() => {
setIsUserLoggedIn(is_user_logged_in())
}, [])
Renders was like this:
{isUserLoggedIn ? (
<>
{/* After login */}
<Profile USER={USER}/>
</>
) : (
<>
{/* Before login */}
<SigninButtons/>
</>
)}
And error solved
You can also check this
https://nextjs.org/docs/messages/react-hydration-error
Just try restarting the server. npm run dev. It worked for me. I was using react-hot-toaster.
Also try to check if you have sth like this:
<p>
<div>
Hello
</div>
</p>
div cant be inside p tag
So there is a indexpage with components, listing ads.
const App = ({ads}) => (
{ (ads.items===undefined) ? <></> : ads.items.map(item => <Ad item={item} key={item.postingId} id={item.postingId}/>) }
)
export async function getServerSideProps(context) {
const res = await fetch(`www.apiadress.com/${queryString.stringify(context.query)}`)
const ads = await res.json()
// console.debug(ads)
console.debug(queryString.stringify(context.query))
return {
props: {ads}, // will be passed to the page component as props
}
}
and component Ad receives those props, and renders cards
const Ad = props => (
<Card className="customCard">
<Card.Body>
<Card.Text className="text">
<div className="mainDetails">
<h1 className="ad_Title"><Link href="[ad]" as={props.item.postingId}>{props.item.title}</Link></h1>
<p>posted on: {props.item.postingDate.day} / {props.item.postingDate.month}
{props.item.postingDate.year} by {props.item.employer}
</p>
<div className="description">
<p><span><Cash /><b> {props.item.rateFrom}- {props.item.rateTo} per hour </b></span> <GeoAlt /> <b>{props.item.city}</b></p>
<p> <Clock /> <b>{props.item.jobType}</b></p>
</div>
<p>{props.item.description.slice(0, 230)}.....</p>
</div>
<div>
<img src={props.item.employerLogoUrl} alt={props.item.employer} className="empImg" />
<Button variant="primary" href=""> <Heart width="12" height="12"/> SHORLIST </Button>
</div>
</Card.Text>
</Card.Body>
</Card>
export default Ad;
with NPM run dev - everything works perfectly but at NPM run build I am getting an error
Error occurred prerendering page "/componenets/ad/ad". Read more:
https://err.sh/next.js/prerender-error TypeError: Cannot read property
'postingId' of undefined
What's causing this? I am assuming that components does not have data before render.
How to solve this problem?
it simply that you have some items in your array null so it caused that error. I suggest to rewrite like this so it can avoid unnecessary error
const App = ({ads}) =>
(ads.items || []).map(item => item ? <Ad item={item} key={item.postingId} id={item.postingId}/> : null)
props.item is empty on cards component.
Add validation check in the start of the Ad component:
if (!props.item) {
return null;
}
How can I pass props to another component using React router link?
I tried to do it like this. However, it is not working.
By this I mean props are not passing through.
I want to pass information of currencies to another component and than use It.
Any suggestions?
return <Div>
<div className="header">
<Heading>Welcome To CoinValue </Heading>
</div>
<Ul>
{currentItems.map(currencies => {
return <Link
key={uuidv4()}
to={`/cryptoValute/${currencies.id}`
props={currencies}}><Li>{currencies.name}</Li></Link>
})}
<div>
{this.renderPagination()}
</div>
</Ul>
</Div>
Ciao, try to modify your code like this:
return <Div>
<div className="header">
<Heading>Welcome To CoinValue </Heading>
</div>
<Ul>
{currentItems.map(currencies => {
return <Link
key={uuidv4()}
to={{pathname: `/cryptoValute/${currencies.id}`, query: {currencies}}}><Li>{currencies.name}</Li></Link>
})}
<div>
{this.renderPagination()}
</div>
</Ul>
</Div>
Then in your component, to retrieve currencies value you could do this.props.location.query.currencies.
I'm importing:
import Collapse from "react-bootstrap/es/Collapse";
So i'm trying to get my collapse to work in my project here is from the render:
<div className="card-header" >
<a className="card-link" href='#compSci' onClick={this.toggleCollapse}>
Computer Sciences
</a>
</div>
<Collapse id="collapse1" isOpen = {this.state.collapse1}>
<div className="card-body">
<div className="row">
{
computerScience.map(skill => (
<div className="col">
<SkillPopover skill={skill} />
</div>
))
}
</div>
</div>
</Collapse>
With a toggle collapse function which changes the values from true to false
toggleCollapse = () => {
this.setState({ collapse1: !this.state.collapse1 });
console.log(this.state.collapse1)
}
I'm not quite sure what is going on with this as checking with the debugger it clearly changes the values of the state value collapse 1 between the true and false but it refused to open the Collapse. Any help would be greatly appreciated.
EDIT I'm following a guide here: https://reactstrap.github.io/components/collapse/
So my difficulty was that I failed to import the correct bootstrap. This is a reactstrap component and not a react-bootstrap component.