I am trying to embed a twitter timeline of a particular page in a react-bootstrap Panel however I am unable to get it to work.
I am not getting any console logging output which makes me think that I have not gotten it set up properly, however I am unsure as to what the issue is.
I am using react-twitter-widgets to embed the timeline.
My component is as follows:
import React from 'react';
import { Timeline } from 'react-twitter-widgets';
function twitterTimeline() {
return (
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'MetEireann',
}}
options={{
username: 'MetEireann',
height: '400',
}}
onLoad={() => console.log('Timeline is loaded!')}
/>
);
}
export default twitterTimeline;
And then I am using it like so in my react-bootstrap Panel:
import twitterTimeline from '../../components/TwitterTimeline';
.....
<div className="col-lg-4">
<Panel
header={<span>
<i className="fa fa-bar-chart fa-fw" /> Weather Forecast
</span>}
>
<twitterTimeline />
</Panel>
</div>
The component is being loaded in so the issue is obviously with the component itself.
Any help would be greatly appreciated. Thanks in advance.
Related
I am using react and doing my portfolio
when people click on the button to view my github repo or project it goes to the wrong place
const Project = () => {
return (
<div className='work-container'>
<h1 className='project-heading'>Projects</h1>
<div className='project-container'>
{ProjectData.map((val, ind) => {
return (
<ProjectCard
key={ind}
imagesource={val.imagesource}
title={val.title}
text={val.text}
view={val.view}
github={val.github}
/>
)
})}
</div>
</div>
)
}
this is what my data file contains
const ProjectData = [
{
imagesource: project1,
title: 'Diamond Devs Tech Blog',
text: 'A community of developers who can write blogs about code or ask questions Built out of a need for developers have a nice simple platform rather than the complex ones out there in the marketplace, this was for an assignment foor my Bootcamp was challenging as had to do the front and backend from scratch using tech that I am still getting used too.',
view: 'https://diamond-developers-tech-blog.herokuapp.com/',
github: 'https://github.com/breakfireaus/diamond-developers-tech-blog',
},
]
export default ProjectData
I tried the above and instead of going to view project or github it goes to for example
https://matthew-younger-portfolio.herokuapp.com/portfolio/https://diamond-developers-tech-blog.herokuapp.com/
instead of just
https://diamond-developers-tech-blog.herokuapp.com/
I have reviewed code from you github repo. What you are doing is using React router NavLink to move to an external website which you cannot do as you can use it move within your application Documentation
.
You can convert them to a tag in your Project Card and they will work fine. You can use target="_blank" if you want to open the link in new tab.
import "./ProjectCardStyle.css";
import React from "react";
import { Link } from "react-router-dom";
const ProjectCard = (props) => {
return (
<div className="project-card">
<img src={props.imagesource} alt="Project Imagery" />
<h2 className="project-title">{props.title}</h2>
<div className="project-details">
<p>{props.text}</p>
<div className="project-buttons">
<a target={"_blank"} href={props.view} className="btn">
VIEW
</a>
<a target={"_blank"} href={props.github} className="btn">
Github
</a>
</div>
</div>
</div>
);
};
export default ProjectCard;
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'm currently working on a react portfolio and wanted to explore ant design, one of the final steps I currently need to do is make the actions clickable events/a href that go over to github. I've looked everywhere and cant figure it out.
This is the current model
// input projects into cards
import React from 'react';
import { Card, Avatar, Tag} from 'antd';
import {GithubOutlined,LinkOutlined} from '#ant-design/icons';
const { Meta } = Card;
export function ProjectList() {
return (
<Card
style={{ width: 300 }}
cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[
<GithubOutlined key="github" type="link">
<Tag>
<a href="https://ant.design/components/card/">
</a>
</Tag>
</GithubOutlined>,
<LinkOutlined key="link" href=""/>
]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
)
};
You can do one thing add div outside of the card with onClick:
<div onClick={() => alert("Hello from here")}>
<Card></Card>
</div>
Figured it out, since it's going to an external link and icons are already clickable events, you just surround the icon with <a> tag and it works.
<a href="">
<LinkOutlined key="link" href=""/>
</a>
I am new in react and trying to use react awsome slider its working fine but i want to add button and text on slider image but dont know how to do that.
Here is my slider component
import React, { Component } from 'react'
import slider1 from '../images/slider/1.jpg'
import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'
import 'react-awesome-slider/dist/styles.css'
const AutoplaySlider = withAutoplay(AwesomeSlider)
class Slider extends Component {
render () {
return (
<div className='slider-area'>
<AutoplaySlider
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={slider1} />
<div data-src={slider1} />
<div data-src={slider1} />
</AutoplaySlider>
</div>
)
}
}
I would really appreciate if someone can help.
thanks
Set organicArrows prop to false and provide buttonContentRight and buttonContentLeft. It will work.
Working demo - it shows custom text instead of arrow. You can add a button etc.
Code snippet
<AwesomeSlider
organicArrows={false}
buttonContentRight={<p style={{ color: "black" }}>Right</p>}
buttonContentLeft={<p style={{ color: "black" }}>Right</p>}
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={"https://randomuser.me/api/portraits/women/43.jpg"} />
<div data-src={"https://randomuser.me/api/portraits/women/44.jpg"} />
</AwesomeSlider>
I created a react website using create-react-app. In one of the pages, I want to embed an airbnb preview, see below code and screenshot provided by airbnb.
How can I insert this code into my React components? (NB I don't want to use jQuery)
<div
class="airbnb-embed-frame"
data-id="21917882"
data-view="home"
data-hide-price="true"
style="width:450px;height:300px;margin:auto"
>
<a href="https://www.airbnb.com/rooms/21917882?s=51">
<span>View On Airbnb</span>
</a>
<a
href="https://www.airbnb.com/rooms/21917882?s=51"
rel="nofollow"
>T2 hypercentre Capitole/St-Sernin, quiet & bright
</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk" />
</div>;
The component created by this code, which I want to embed in the react page
This does go quite against React principles, but you could load the embed script with something like react-async-script-loader (or a custom solution) and then call the provided AirbnbAPI.bootstrap() function on render or when the component mounts.
💻 Live Example
import React, { Component } from "react";
import scriptLoader from "react-async-script-loader";
const Preview = ({ isScriptLoaded, isScriptLoadSucceed }) => {
if (isScriptLoaded && isScriptLoadSucceed) {
window.AirbnbAPI.bootstrap();
}
return (
<div
className="airbnb-embed-frame"
data-id="21917882"
data-view="home"
data-hide-price="true"
style={{ width: 450, height: 300, margin: "auto" }}
>
<a href="https://www.airbnb.com/rooms/21917882?s=51">
<span>View On Airbnb</span>
</a>
<a href="https://www.airbnb.com/rooms/21917882?s=51" rel="nofollow">
T2 hypercentre Capitole/St-Sernin, quiet & bright
</a>
</div>
);
};
export default scriptLoader(["https://www.airbnb.com/embeddable/airbnb_jssdk"])(
Preview
);