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.
Related
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
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.
TLDR: Cannot figure out why component is still being rendered while no props are passed.
So I have been building a NextJS application, and I have this banner component that is shown on every page of my website. It has some header text, buttons and an image:
const Banner = (props) => {
return (
<div className={bannerStyles.wrapper}>
<div className={classnames(bannerStyles.banner, "wrap", "center")}>
<div className={bannerStyles.banner_left}>
<h1>{props.header}</h1>
<div className={bannerStyles.button_wrapper}>
<div className={bannerStyles.button}>
<Button>{props.button || null}</Button>
</div>
<div className={bannerStyles.button}>
<Button>{props.scnd_button || null}</Button>
</div>
</div>
</div>
<div className={bannerStyles.banner_right}>
<Image src={props.image} alt=""></Image>
</div>
</div>
</div>
);
};
Inside of this, as you can see I have two Button components (The MDEast thing is an arrow icon):
const Button = ({children}) => {
return (
<div className={buttonStyles.button}>
<Link href="/"><a>{children} <MdEast /></a></Link>
</div>
)
}
Now I want the option that if no prop is passed, that the Button component(s) do(es) not render/ is hidden from the page, so that it is optional per page. Yet the Button does still render, even though I am not passing any props on my About page. My about page:
const About = () => {
return (
<>
<Banner
header="Hello this is my code"
image={banner_placeholder}
/>
</>
)
}
PS. I am fairly new to React and NextJS, so this might be a beginner mistake, or I am not understanding the fundamentals well enough, but could someone point me in the right direction please?
To conditionally render the button you can use:
props.button && <Button>{props.button}</Button>
When props.button is falsy, then button will not get rendered.
This is my code so far
class PortfolioList extends Component{
render(){
const {column , styevariation } = this.props;
const list = PortfolioListContent.slice(0 , this.props.item);
return(
<React.Fragment>
{list.map((value , index) => (
<div className={`${column}`} key={index}>
<div className={`portfolio ${styevariation}`}>
<div className="thumbnail-inner">
<div className={`thumbnail ${value.image}`}></div>
<div className={`bg-blr-image ${value.image}`}></div>
</div>
<div className="content" >
<div className="inner">
<h3>{value.category}</h3>
<p>{value.title}</p>
<div className="portfolio-button">
<a className="rn-btn" href="/portfolio-details">Live</a>
</div>
<div className="portfolio-button">
<a className="rn-btn" href="/portfolio-details">GitHub</a>
</div>
</div>
</div>
</div>
</div>
))}
</React.Fragment>
)
}
}
This is displaying my portfolio section of my website I want to display the title of the each application and details only when i want to hover.
Also How can i make my buttons wrap next to each other? instead of taking up the new line?
Thank you
You can use onMouseEnter and onMouseLeave event to handle hovering. Bind a function to this event on title and keep a local boolean state shouldShowDetails with default value false. When the function is called, change this boolean to true and conditionally render the details.
For the second part, make your buttons container a flex and set flex-wrap to wrap.
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 .