I got a question.
I'm building youtube based web, and got need help with storing watched videos of logged user
This is code of player
class VideoDetails extends Component {
constructor(props){
super(props)
}
render(){
const video = this.props.video;
if(!video) {
return <div />
}
const url = `https://www.youtube.com/embed/${video.id.videoId}?autoplay=1`;
return (
<div>
<div>
<iframe className="Videoplayer" src={url} allowFullScreen></iframe>
</div>
<div>
<h2> {video.snippet.title}</h2>
<div>{video.snippet.description}</div>
</div>
</div>
)
}
}
export default VideoDetails;
Implement a Redux store and either store it in localStorage or something like Firebase.
Related
This is a whitebox.jsx file where i have a state "wbimage", it should contain an image url that will be displayed in className="wbimgframe". I want to access and edit this state i.e, give image url to "wbimage" in another jsx file - javaa.jsx
whitebox.jsx
import "./whitebox.css"
class Whitebox extends Component {
constructor(props) {
super(props);
this.state ={
wbimage: '',
};
}
render() {
return (
<div>
<div className="wbdemo" >
<div className="wbimgframe">
<center>
<img src={this.state.wbimage} alt="Given image will be displayed here"/>
</center>
</div>
<div className="wbdemobookname">
<label>Book Name</label>
</div>
<div className="wbdemobookauthor">
<i><label>By </label>
<label>Book Author</label></i>
</div>
</div>
</div>);
}
}
export default Whitebox;
I have tried this, but still nothing is displayed in image.
javaa.jsx
import Whitebox from "./whitebox";
import "./javaa.css";
class Javaa extends Component {
render() {
return (
<div>
<br/><br/><br/><br/><br/>
<div className="javaamp">
<Whitebox>
{this.props.wbimage} = "https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg"
</Whitebox>
</div>
</div>);
}
}
export default Javaa;
Please help, I am a beginner. So if this question seems easy, please don't mind :)
parent component (From where you have to send the data)
<Whitebox wbimage="https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg">
Child component (from where you are gonna receive the data and use it in your HTML.
console.log(this.props.wbimage)
Check out this to understand better https://reactjs.org/docs/components-and-props.html
I have a component showing the list of blogpost and I create a URL for every post coming from the title, into a string and then split and joint, but I need to create a second component that render the page of the blogpost itself,
my question is, is there any way to pass the state or props from the already created list component into the blogpost component and be access only by that rout URL?
this is the blogdata component that i wanted to use to transfer the state to the other components but only one is working, fetching the data from the API into this.state.blogpost
class BlogData extends Component{
state = {
blogData: []
}
componentDidMount() {
axios.get(`data.json`)
.then(res => {
const blogData = [res.data.blogPosts] ;
this.setState({blogData});
})
};
render(){
const blogData = this.state.blogData.map((value) =>
value.map((val, idx) =>
<BlogBlock
link={val.title.toString().toLowerCase().split(" ").join("-")}
title={val.title}
subtitle={val.subtitle}
thumb={val.thumb}
idx={idx}
/>
)
)
return(
<section id="blog" className="blogList">
<h2>From the Blog</h2>
<div className="blogPosts">
{blogData}
</div>
</section>
)
}
}
const BlogBlock = (props) => {
return (
<div className={`blog-post post-${props.idx}`}>
<Link to={props.link}>
<Img loader={<span className="loading-img">loading....</span>} src={`http://brittdepetter.com/images/${props.thumb}`} alt={props.title} />
<h3>{props.title}<span><br />{props.subtitle}</span></h3>
</Link>
</div>
)
}
and the component that im trying to create but not working is this one, but no lock of making the route works :(
const BlogPost = (props) => {
return (
<div>
<Router path={props.link} />
<Title title={props.title } />
<div className="textBox boxImg">
<div className="story-img-box">
<Img src={props.imgsrc } />
</div>
<div>
<Paragraph body={props.body} />
</div>
</div>
</div>
)
}
There is way to pass a extra parameter on Link. For that you should pass to attribute as object instead of string.
change your Link
<Link to={props.link}>
to
<Link to={{pathname:props.link, blog:props}}>
In your BlogPost component, access using following code
this.props.location.blog
PS. refreshing browser while you are on BlogPost component will require to re-fetch a blog again.
I'm still a newbie in Reactjs and I'm trying to build a single page for my project. And I'm thinking to click the logo image and reload the page.
I have tried 2 ways, one is using <a href="javscript:location:reload: true"> in front of image element but I got this Script URL is a form of eval no-script-url in my console.
I also tried onClick eventlistener but nothing is working.
I appreciate any helps, or new way to build this?
Below is my Home.js
class Home extends React.Component {
render() {
return (
<div>
<img src={MindScribeLogo} className="HomePage" alt="logo" />
<div>
<img src={MindScribeZebra} className="HomePage" alt="zebra" />
</div>
</div>
);
}
}
export default Home;
Below is my App.js
class App extends Component {
render() {
return (
<div className="App">
<Home/>
);
}
}
Hmm you can try a basic onClick function. hrefs are not supposed to contain scripts.
<img onClick={() => this.reloadPage()}/>
reloadPage () {
window.location.reload()
}
I am outputting the text using API from the server, and I have an admin which has the html fields for facilitating filling the content. The issue in here that now the text displaying with html codes. How I can get rid of that undeeded html codes. I guess I have to use html entity decode? How I will implement that in react project? Below you see that the text illustrates not only text and html code.
export class FullInfoMedia extends React.Component {
render() {
const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });
return (
<div>
<div className="about-title">
<div className="container">
<div className="row">
<img className="center-block" src={this.props.about.image}/>
<h2>{this.props.about.title}</h2>
{renderHTML(<p>{this.props.about.body}</p>)}
</div>
</div>
</div>
</div>
);
}
}
You can use dangerouslySetInnerHTML, but be sure you render only your input, not users. It can be great way to XSS.
Example of using:
const renderHTML = (rawHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } });
And then in a component:
{renderHTML("<p> </p>")}
Even though you can use dangerouslySetInnerHTML it's not really a good practice, and as stated by Marek Dorda it's a great thing for making your app XSS vulnerable.
A better solution would be to use the he library. https://github.com/mathiasbynens/he
This would be an example of how would your component look with it.
import he from 'he'
export class FullInfoMedia extends React.Component {
render() {
const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });
return (
<div>
<div className="about-title">
<div className="container">
<div className="row">
<img className="center-block" src={this.props.about.image}/>
<h2>{this.props.about.title}</h2>
{ he.decode(this.props.about.body) }
</div>
</div>
</div>
</div>
);
}
}
Also, if it were my codebase, I would most likely move the decoding to the API call, and in the component just consume the value that comes from the store
You can simply try this, it decodes text and then display.
<p dangerouslySetInnerHTML={{__html:" "}}/>
I am having difficulties implementing a piece of React code that fetches and renders information from localStorage.
I have a gallery of thumbnail pictures (components) that upon a click, trigger a function that fetches information from a db for that particular picture and stores the data in localStorage. It also redirects the user to the ShowTale component where I display information about the picture.
class Tale extends Component {
handleClick(){
const pictureId = this.props._id;
this.props.fetchTale(pictureId);
}
render() {
const {_id, title, story, picture} = this.props;
return (
<div className="col-md-2 col-sm-6">
<div className="thumbnail">
<img src={picture} />
<div className="caption">
<h4>{title}</h4>
</div>
<p>
<Link onClick={this.handleClick.bind(this)} to="showTale" className="btn btn-primary">More Info</Link>
</p>
</div>
</div>
)
}
};
export default connect(null, actions)(Tale);
I set the data via the following action:
export function fetchTale(id){
return function(dispatch){
axios.get(`${ROOT_URL}/tale`, {params: {id: id}}).then(function(response) {
localStorage.setItem('fishTail', JSON.stringify(response.data));
})
}
};
The problem lies in that the ShowTale component, below, does not render the correct data. It renders the correct data on the first instance upon starting the application, but on subsequent requests, it renders the previous data. For example: I'll start the app, click on picture 1 renders 1, click on picture 2 renders 1, click on picture 3 renders 2, and so on. The data on localStorage is being correctly updates, but it appears the component is grabbing the data from localStorage before it is updated by the action.
class ShowTale extends Component {
constructor(props){
super(props)
this.state = {tale: JSON.parse(localStorage.getItem('fishTail'))}
}
componentWillMount(){
this.setState = JSON.parse(localStorage.getItem('fishTail'));
}
renderTale(){
const tale = this.state.tale;
console.log('the tale: ', tale);
const {title, story, picture, author} = tale;
return (
<div className="thumbnail">
<img className="image-responsive" src={picture}/>
<div className="caption-full">
<h4>{title}</h4>
<p>{story}</p>
<p><em>Submitted by: {author}</em></p>
</div>
</div>
)
}
render() {
return(
<div className="container showTale">
<div className="row">
<div className="col-sm-12">
{this.renderTale()}
</div>
</div>
</div>
)
}
};
export default ShowTale;
Any assistance with getting the pictures to show in sync with the data in localStorage will be greatly appreciated!
I'm using JSX so this may look weird to you.
You could put all the elements that need to change, in the state of your parent. Then the child component will be dumb, and just handle the content as it changes from the Tale parent component example:
class Tale extends Component {
// Parent Tale component handles fetching and setting state.
constructor(props){
super(props)
this.state = {
title:'',
story:'',
picture: Null,
author: ''
}
}
componentWillMount(){
this.fetch_info()
}
fetch_info(){
newObj = JSON.parse(localStorage.getItem('fishTail'))
setState({
title: newObj.title,
story: newObj.story,
picture: newObj.picture,
author: newObj.title
});
}
render() {
return(
<div className="container showTale">
<div className="row">
<div className="col-sm-12">
<ShowTale
title={this.state.title}
story={this.state.story}
picture={this.state.picture}
author={this.state.author} />
</div>
</div>
</div>
)
}
};
class ShowTale extends Component {
// Child ShowTale receives Props.
constructor(props){
super(props)
}
render(){
<div className="thumbnail">
<img className="image-responsive" src={this.props.picture}/>
<div className="caption-full">
<h4>{this.props.title}</h4>
<p>{this.props.story}</p>
<p><em>Submitted by: {this.props.author}</em></p>
</div>
</div>
}
export default ShowTale;
If this doesn't work, look at passing in a function to setState. Here is an example from the documentation.
Hope this example helps -- sorry it is in JSX!