React component rendering before data received from localStorage - reactjs

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!

Related

How to access state/props in another jsx file

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

Cannot pass a simplified function to onClick event handler ReactJs

In my React app, I have two Components, Main and Menu Component. Main Component is the parent component of Menu. Menu shows a list of items and upon clicking one of the item, it updates Main's state with the help of a function that I pass as props to Menu. Below is the code for better understanding:
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
dishes: dishes,
selectedDish: null
};
this.selectDish=this.selectDish.bind(this);
}
selectDish(dishId){
this.setState({ selectedDish: dishId});
}
render() {
return (
<div className="App">
<Menu dishes={this.state.dishes} onClick={this.selectDish} />
</div>
);
}
}
export default Main;
And below is the Menu Component:
class Menu extends Component {
constructor(props){
super(props);
this.selectdish=this.selectdish.bind(this);
}
selectdish(dishId){
return this.props.onClick(dishId);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1">
<Card key={dish.id}
onClick={this.selectdish(dish.id)}>
</Card>
</div>
);
});
}
}
export default Menu;
I have omissed some irrelevant parts of the code.
So the workflow should be that when we click over one of dishes rendered by the Menu, that dish's id should be passed back to Main and update the state variable ```selectedDish````, as seen in the method selectDish.
But in the browser console, I get the error Cannot update during existing state transition.
The weird thing is that if I don't pass any dish id and set the selectedDish to a fixed value like 1, everything works fine.
Please help me guys to identify if there is any problem in my event handler, because that is the only part that seems to contain an error.
Thank You!
You are not passing the onClick of the Card a function but you are already calling that function with this.selectdish(dish.id). This will initiate the flow on render, not on click.
You have three options here.
You either wrap that in an additional function like this: onClick={() => {this.selectdish(dish.id)}}>. That way, you are passing a function to the onClick, which is required, and not executing that.
Or you make selectdish return a function like this:
selectdish(dishId){
return () => {this.props.onClick(dishId)};
}
Or you add a name to the card and access the name of the element from the click event:
class Menu extends Component {
constructor(props){
super(props);
this.selectdish=this.selectdish.bind(this);
}
selectdish(event){
return this.props.onClick(event.target.name);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1">
<Card key={dish.id}
name={dish.id}
onClick={this.selectdish}> // this is now the function without calling it
</Card>
</div>
);
});
}
}
export default Menu;
You have some problem in your code:
property key must be define in root <div>
render method in Menu component returns nothing
-
class Menu extends React.Component {
constructor(props) {
super(props);
this.selectdish = this.selectdish.bind(this);
}
selectdish(dishId) {
return this.props.onClick(dishId);
}
render() {
return this.props.dishes.map(dish => {
return (
<div className="col-12 col-md-5 m-1" key={dish.id}>
<div onClick={() => this.selectdish(dish.id)}>{dish.id}</div>
</div>
);
});
}
}
See my playground where I fixed this issues:
https://codesandbox.io/s/react-playground-ib6pr?file=/index.js

How to get array in class component to another file in react?

The real situation is that I want to get the value of radio button in one file and let them show in another file, therefore I can let user know what they select before.
The code that use select the radio button:
class Usurvey extends Component {
constructor(props){
super(props);
this.state = {
uid: uuid.v1(),
studentName: '',
answers: {
answer1: '',
answer2: '',
answer3: ''
},
isSubmitted: false
};
this.nameSubmit = this.nameSubmit.bind(this);
this.answerSelected = this.answerSelected.bind(this);
this.questionSubmit = this.questionSubmit.bind(this);
}
render(){
<form onSubmit={this.questionSubmit}>
<div className="card">
<div className="video">
<ReactPlayer url={Array[0].url} />
</div>
<label>Do you think the video is fake or real? </label> <br />
<input type="radio" name="answer1" value="real" onChange={this.answerSelected} />Real
<input type="radio" name="answer1" value="fake" onChange={this.answerSelected} />Fake
</div>
<div className="card">
<div className="video">
<ReactPlayer url={Array[0].url} />
</div>
<label>Do you think the video is fake or real? </label> <br />
<input type="radio" name="answer2" value="real" onChange={this.answerSelected} />Real
<input type="radio" name="answer2" value="fake" onChange={this.answerSelected} />Fake
</div>
return(
<div>
{studentName}
{questions}
</div>
);
}
}
export default Usurvey;
The code file I want to input the value of radio button.
'use strict'
import React, { useState } from 'react';
import ReactPlayer from 'react-player';
import Array from '../Array';
import Usurvey from '../Usurvey2';
export default () => {
return (
<div>
<div className="video">
<ReactPlayer url={Array[0].url} playing/>
<div>
<p>Your guess: </p>
<p>{Usurvey.props.Answer[0]}</p>
<p>Right Answer:</p>
<p>{Array[0].name}</p>
</div>
</div>
</div>
)
}
Now I tried to import the Usurvey from the last file and use prop to get answer, but it does not work
Props are not static or hardcoded data that can be accessed by just import the file. Moreover, this is not a way to pass props from a parent component to a child component.
Either you need to lift up the state in Usurvey component to its parent component from where you can pass it to the component where you want the radio button's value.
Or you can pass onSubmit from handler as a prop to Usurvey component from its parent component. The parent component will store the form data and pass it to the required component.
Or if both the component are at a different level of hierarchy then you can also use redux instead of passing it to each component in the path.
You can read more about components and props over here.
Edit
class ParentComponent extends Component {
state = {
submittedQuestion: {} // depending on your logic you can store all the
questions or just one.
}
onQuestionSubmit = () => {
// store data in state.
}
render (){
const {submittedQuestion} = this.state;
return (
<Usurvey onQuestionSubmit={this.onQuestionSubmit} />
<QuestionSubmittedView submittedQuestion={submittedQuestion}/>
);
}
}

How to make filter by name and address in React.js

I'm new with React.js. I'm making filter by name and address but I don't know how to do this with separate components. I have main component Speakers - in this component I receive json and send this data to Filter and List. In List.js I get data and display all speaker items(all json). In Filter I want to make search by name and address. I don't know how to bind component filter and list. I'll appreciate if you help me. I know that Redux help working with data in React but I want to understand how to do this without it.
enter image description here
Speakers.js
import React, {Component} from 'react';
import Filters from './Filters';
import List from './List';
class Speakers extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
items: []
}
}
componentDidMount() {
this.setState({isLoading: true});
fetch("https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole")
.then(res => res.json())
.then(
(result) => {
this.setState({
items: result,
isLoading: false
});
console.log(result);
}
)
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
return (
<div className="speakers">
<div className="container-fluid">
<Filters getItems={this.state} />
<List getItems={this.state} />
</div>
</div>
);
}
}
export default Speakers;
List.js
import React, {Component} from 'react';
class List extends Component {
render() {
const {items, isLoading} = this.props.getItems;
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<div className="speakers__list">
<div className="row">
{items.map((item, index) => (
<div className="col-md-3" key={index}>
<div className="card form-group shadow">
<div className="card-body text-center">
<h5 className="card-title">{item.first} {item.last}</h5>
<p>{item.email}</p>
<p>{item.address}</p>
<p>{item.balance}</p>
<p>{item.created}</p>
</div>
</div>
</div>
))}
</div>
</div>
)
}
}
export default List;
Filters.js
import React, {Component} from 'react';
class Filters extends Component {
render() {
return (
<div className="filters">
<div className="alert shadow">
<form>
<div className="container-fluid">
<div className="row">
<div className="col-md-5">
<label>Name/Surname</label>
<input type="text" className="form-control" />
</div>
<div className="col-md-5">
<label>Address</label>
<input type="text" className="form-control"/>
</div>
<div className="col-md-2 align-self-center text-center">
<button className="btn btn-primary">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
);
}
}
export default Filters;
One way to move forward (possibly the best way, IMO) is this:
Come up with a data model to describe a single "filter". This could be as simple as an object that describes a name string and an address string that items need to be filtered using. The design of this is up to you; pick whatever works out best.
Then, build two sets of behavior into Speakers:
The ability to receive filtration instructions from Filters. You can achieve this by writing a function in Speakers that acts as a callback function when something changes in Filters. Pass this function as a prop to Filters and have Filters call it when its state changes (meaning, when you get user interaction).
The ability to send this filter object to List. Every time the callback function is called, have Speakers send it down to List. You can achieve this by storing what Filters sends back in Speakers' state and passing that state item down to List as a prop. That should update List's props every time Filters calls the callback function and thus affects Speakers' state.
Then, build behavior in List such that it changes its rendering behavior based on this filter object. Make sure to detect props updates so that it works on the fly.

how to store watched videos with react

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.

Resources