Develop Reference

Location/city value is undefined after passing through other component and then render page gone blank..any solution?

I have two components "search" and "Maindata". I am passing the input value from the search component to maindata component where I want to replace the city attribute with the input value(location) in API. but the browser display went blank and the console give an undefined 'city' error, etc. I got stuck in this problem if anyone has a solution?
Here "search" component;
import React , {useState} from "react";
import Maindata from "./Maindata";
import "../Componentstyle/search.css";
export default function Search() {
const [location, setLocation] = useState();
<Maindata city={location}/>
return (
<div className="main">
<nav className="istclass">
<form className="form">
<div className="search">
<input
value={location}
placeholder="search city"
className="searchbox"
onChange={(e)=>setLocation(e.target.value)}
/>
<button className="nd" onClick={(e)=>setLocation(e.target.value)}>
Submit
</button>
</div>
</form>
</nav>
</div>
);
}
Here "Maindata" component;
import React, { useState, useEffect } from "react";
import "../Componentstyle/Main.css";
export default function Maindata(props) {
const [data, setData] = useState(null);
let city = console.log(props.city);
let weather = async () => {
const key = "1ab6ef20384db1d7d9d205d609f7eef0";
await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}&units=metric&formatted=0`
)
.then((response) => response.json())
.then((actualData) => setData(actualData));
};
useEffect(() => {
weather();
}, []);
if (!data) {
return <div>Loading...</div>;
}
const link = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`;
return (
<div className="maindata">
<div className="city">{data.name}</div>
<div className="temp">{data.main.temp} C</div>
<div className="icon">
<img src={link} alt="not found" />{" "}
</div>
<div className="feel">feels Like {data.main.feels_like} C</div>
<div className="wind">Wind {data.wind.speed} Km/hr</div>
<div className="cloudy">{data.weather[0].main}</div>
<div className="humidity">humidity {data.main.humidity}%</div>
<div className="sunrise">
sunrise :- {new Date(data.sys.sunrise * 1000).toUTCString()}{" "}
</div>
<div className="sunset">
sunset :- {new Date(data.sys.sunset * 1000).toUTCString()}
</div>
</div>
);
}

<Maindata city={location}/>
keep this line of code inside the return

In your example, there is no meaningful connection between the Search and Maindata components. Meaning Maindata component will not get rendered on the page because it is not in the return statement of the Search component.
The Maindata component as below, is in JSX format, when you use JSX in your code in React, under the hood, React.createElement() method is being called.
Each call to React.createElement returns an object describing what to render to that part of the page. So it makes sense to put the Maindata component in the return statement. That is responsible for rendering the HTML elements from that component when you're loading a page containing that component.
<Maindata city={location}/> // is JSX and should be in the return statement to get rendered on the page and showing the right location

Accessing Redux State from React Component : Connect not work

As I understand I should be able to access Redux state inside a React Component if I use Connect from react-redux and then use function mapStateToProps which should send redux state as props to component?
In this following code I try to do that, and I tried all sorts of ways, but it does not work.
Here is code of a react component.
After the imports I write mapStateToProps functions, after which I i thought Id get state.
I know state contains a bit of data, for example profile. So I thought Id make test = state.profile and a bit later in code I will JSON stringify props, and results is only a article json string.
After code you will see an image from Chrome Dev Tools where you can see that state contains many things.
Id like to access them in this component. What am I doing wrong and how can I make it work?
From Image you see state has 'common' field, where there is 'token' and 'currentUser' data inside. Id like to check those values specifically in this component.
import React from 'react';
import { Link } from 'react-router-dom';
import agent from '../agent';
import { connect } from 'react-redux';
import { ARTICLE_FAVORITED, ARTICLE_UNFAVORITED } from '../constants/actionTypes';
const mapStateToProps = (state) => {
return {test: state.profile}
}
const FAVORITED_CLASS = 'btn btn-sm btn-primary';
const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';
const mapDispatchToProps = dispatch => ({
favorite: slug => dispatch({
type: ARTICLE_FAVORITED,
payload: agent.Articles.favorite(slug)
}),
unfavorite: slug => dispatch({
type: ARTICLE_UNFAVORITED,
payload: agent.Articles.unfavorite(slug)
})
});
const ArticlePreview = props => {
**console.log(JSON.strinify(props));**
const article = props.article;
const favoriteButtonClass = article.favorited ?
FAVORITED_CLASS :
NOT_FAVORITED_CLASS;
const handleClick = ev => {
ev.preventDefault();
if (article.favorited) {
props.unfavorite(article.slug);
} else {
props.favorite(article.slug);
}
};
return (
<div className="article-preview">
<div className="article-meta">
<Link to={`/#${article.author.username}`}>
<img src={article.author.image} alt={article.author.username} />
</Link>
<div className="info">
<Link className="author" to={`/#${article.author.username}`}>
{article.author.username}
</Link>
<span className="date">
{new Date(article.createdAt).toDateString()}
</span>
</div>
<div className="pull-xs-right">
<button className={favoriteButtonClass} onClick={handleClick}>
<i className="ion-heart"></i> {article.favoritesCount}
</button>
</div>
</div>
<Link to={`/article/${article.slug}`} className="preview-link">
<h1>{article.title}</h1>
<p>{article.description}</p>
<span>Read more...</span>
<ul className="tag-list">
{
article.tagList.map(tag => {
return (
<li className="tag-default tag-pill tag-outline" key={tag}>
{tag}
</li>
)
})
}
</ul>
</Link>
</div>
);
}
export default connect(() => ({}), mapDispatchToProps)(ArticlePreview);

TypeError: Cannot read property of undefined using React

I'm new in React and I'm doing a little app with PokeAPI. I have a component called PokemonDetail in which I want to show the details of a pokemon, but the app throws me the next error
TypeError: Cannot read property 'front_default' of undefined
my component looks like this:
import React from "react";
const PokemonDetail = ({ pokemon }) => {
return (
<div>
<div className="text-center">{pokemon.name}</div>
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
{pokemon.id}
</div>
);
};
export default PokemonDetail;
And the App component from which the PokemonDetail recive the prop of pokemon looks like this:
import React from "react";
import PokeAPI from "../apis/PokeAPI";
import SearchBar from "./SearchBar";
import PokemonDetail from "./PokemonDetail";
class App extends React.Component {
state = { pokemon: '' };
onTermSubmit = async term => {
try {
const response = await PokeAPI.get(`pokemon/${term}`);
this.setState({ pokemon: response.data });
console.log(response);
} catch (error) {
console.log("No existe");
}
};
render() {
return (
<div className="container">
<div className="row mt-3">
<div className="col">
<SearchBar onFormSubmit={this.onTermSubmit} />
</div>
</div>
<div className="row mt-3">
<div className="col-9" />
<div className="col-3">
<PokemonDetail pokemon={this.state.pokemon} />
</div>
</div>
</div>
);
}
}
export default App;
I don't understand why it throws me this error because only throws it with this and other properties of the json. With the name property works and wait until I send it some props, same with the id but no with the front_default property, which is a url of a image.

Because ajax is slower than react rendering, you can use a loading component before you get the data.
const PokemonDetail = ({ pokemon }) => {
if(pokemon.sprites == undefined){
return(
<div>
Loading...
</div>
);
}
return (
<div>
<div className="text-center">{pokemon.name}</div>
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
{pokemon.id}
</div>
);
};

Very likely just an AJAX issue, your component renders before it has time to complete your request to the API. Try adding an additional check before rendering the image.
import React from "react";
const PokemonDetail = ({ pokemon }) => {
return (
<div>
<div className="text-center">{pokemon.name}</div>
{pokemon.sprites ? (
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
) : (
null
)
}
{pokemon.id}
</div>
);
};
export default PokemonDetail;

#ZHAOXIANLONG gave you the best solution (use a loading component until you receive data), but, if you do not use a loading component, you can use the get method from lodash library [1] in order to avoid a possible error.
import React from "react";
import _ from 'lodash';
const PokemonDetail = ({ pokemon }) => {
const front_default = _.get(pokemon, 'sprites.front_default', 'DEFAULT_VALUE');
const name = _.get(pokemon, 'name', 'DEFAULT_VALUE');
return (
<div>
<div className="text-center">{pokemon.name}</div>
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
{pokemon.id}
</div>
);
};
export default PokemonDetail;
where the third parameter ('DEFAULT_VALUE') is a default value that will be used if the lodash can not retrieve a value for your query.
PS: I advise you to use lodash even in #ZHAOXIANLONG solution if you know that your API Server can be changed.
[1] https://lodash.com/docs/4.17.11#get

The initial state is { pokemon: '' }; pokemon is an empty string. PokemonDetail is referring to pokemon.sprites.front_default, but pokemon is initially a string and a string does not have a field called sprites.
If you are expecting pokemon to eventually become an object, you could initialize it to something that looks like an object:
state = { pokemon: { sprites: {front_default: '' }}};

Getting error "dispatch is not a function" when combining two files [ReactJS]

I am creating a todo List application using reactJS. If I write two different logic in two separate files it works just fine but while combining those two files it gives an error.
RenderRemaining.js file:
import React from 'react';
import { connect } from 'react-redux';
import store from '../store/store';
import RenderRemainingData from './RenderRemainingData';
const RenderRemaining = (props) => {
return (
<div>
<h2>Tasks: </h2>
<hr />
{props.list.map((detail) => {
return <RenderRemainingData key={detail.id} {...detail} />
})}
</div>
);
}
const mapStateToProps = (state) => {
return {
list: state.todoReducer
};
}
export default connect(mapStateToProps)(RenderRemaining);
RenderRemainingData.js file:
import React from 'react';
import { connect } from 'react-redux';
import removeTodo from '../actions/removeTodo';
const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => {
if (!isCompleted) {
return (
<div key={id}>
<h4>{todo}
<span className="float-right">
<a href="#" title="Remove" onClick={() => {
dispatch(removeTodo({todo, description, id}));
}}><i className="fas fa-times"></i></a>
</span>
</h4>
<p>{description}</p>
</div>
);
}
return false;
}
export default connect()(RenderRemainingData);
Now above code works just fine.
After combining above two files as one js file in RenderRemaining.js and deleting RenderRemainingData.js file.
RenderRemaining.js file: (after combining)
import React from 'react';
import { connect } from 'react-redux';
import store from '../store/store';
import removeTodo from '../actions/removeTodo';
const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => {
if (!isCompleted) {
return (
<div key={id}>
<h4>{todo}
<span className="float-right">
<a href="#" title="Remove" onClick={() => {
dispatch(removeTodo({todo, description, id}));
}}><i className="fas fa-times"></i></a>
</span>
</h4>
<p>{description}</p>
</div>
);
}
return false;
}
const RenderRemaining = (props) => {
return (
<div>
<h2>Tasks: </h2>
<hr />
{props.list.map((detail) => {
return <RenderRemainingData key={detail.id} {...detail} />
})}
</div>
);
}
const mapStateToProps = (state) => {
return {
list: state.todoReducer
};
}
connect()(RenderRemainingData);
export default connect(mapStateToProps)(RenderRemaining);
Now when an event of onClick occurs it gives an error as dispatch is not a function in console.
I don't know why is this happening.

This is because when you are rendering the RenderRemainingData component inside RenderRemaining you are not passing the dispatch, but in case of separate file, component will receive the dispatch from connect.
Possible Solutions:
1- Pass the dispatch in props to RenderRemainingData component:
return <RenderRemainingData key={detail.id} {...detail} dispatch={props.dispatch} />
And remove this line:
connect()(RenderRemainingData);
2- Another possible solution is:
Use a wrapper component and instead of rendering RenderRemainingData render that Wrapper component. Like this:
const WrapperRenderRemainingData = connect()(RenderRemainingData);
return <WrapperRenderRemainingData key={detail.id} {...detail} />

Calling connect()(SomeRandomComponent) means you are calling a function which will return you a value, a new Component that you can use.
So in the case of two separate files, first you create a new Component with connect()(RenderRemainingData), then you export the return value.
These two are equivalent.
export default connect()(SomeRandomComponent)
and
const newComponent = connect()(SomeRandomComponent)
export default newComponent
Now, if we look at bottom of your file containing the combined code.
connect()(RenderRemainingData);
export default connect(mapStateToProps)(RenderRemaining);
First expression, creates a newComponent by wrapping connect around RenderRemainingData. But since you didn't assign the return value to a new identifier or RenderRemainingData( you can't because latter is a const , by the way). Also, when you pass a function as a parameter, it is passed by value, so altering the parameter function inside the calling function will not affect its usage outside the calling function.
Easiest Solution for you will be the one mentioned below.
const RenderRemainingData = connect()(props => {
///Add the implementation here
})
There you go, you have a connected component in the same file, with dispatch available.

When does mapStateToProps occur in the component life cycle

I have a list of items in table. I want to be able to click on a details link on any item and go to a new page where I see the details of the item. Below is my code.
import React from 'react';
import { connect } from 'react-redux';
import toastr from 'toastr';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import * as documentActions from '../../actions/documentActions';
class DocumentDetailsPage extends React.Component {
constructor(props) {
super(props);
this.deleteDoc = this.deleteDoc.bind(this);
}
deleteDoc(id) {
this.props.actions.deleteDocument(id)
.then(res => toastr.success('Document deleted successfully!'));
}
render() {
const { document } = this.props;
return (
<div className="col s12">
<div className="card qBox">
<div className="card-content white-text">
<span className="card-title">{document.title}</span>
<p
dangerouslySetInnerHTML={{ __html: document.content }}
className="document-content"></p>
<br />
<p>Access Type:
<span>{(document.access).toUpperCase()}</span></p><br />
<div>
Published Date :
<p>{(document.createdAt) ?
document.createdAt.split('T')[0] : ''}</p>
<p id="owner">Author:
{document.owner.firstName} {document.owner.lastName}</p>
</div>
</div>
<div className="card-action">
<Link to="/">back</Link>
{this.props.auth.user.userId === document.ownerId &&
<div className="right">
<Link to={`/document/${document.id}`}>Edit</Link>
<Link to="/" onClick={this.deleteDoc()}> Delete </Link>
</div>
}
</div>
</div>
</div>
);
}
}
DocumentDetailsPage.propTypes = {
document: React.PropTypes.object.isRequired,
actions: React.PropTypes.object.isRequired,
auth: React.PropTypes.object.isRequired,
};
function getDocumentById(documents, id) {
const document = documents.filter(item => item.id === id);
if (document) return document[0];
return null;
}
function mapStateToProps(state, ownProps) {
const documentId = ownProps.params.id; // from the path `/document/:id`
let document;
if (documentId && state.documents.length > 0) {
document = getDocumentById(state.documents, parseInt(documentId, 10));
}
return {
document,
auth: state.auth,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(documentActions, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(DocumentDetailsPage);
When I click on the details link, it should take me to this page with route document/:id where I can read the id from the route and fetch the corresponding document from state and render in the component. But when i go to this page, it tells me that document is undefined. Any reason for this? or is there a better way to get the param id from the route than using mapStateToProps?

You have two problems here:
1) Your deleteDoc class method expects an id argument which is passed to your action creator. Because you already have the full document as a prop, get it from the object instead of receiving it:
deleteDoc() {
const { actions, document } = this.props
actions.deleteDocument(document.id)
.then(res => toastr.success('Document deleted successfully!'));
}
2) You're CALLING the deleteDoc function in your onClick handler!
// Wrong
<Link to="/" onClick={this.deleteDoc()}> Delete </Link>
Remove the parens and simply set a reference to your function as the onClick prop, not the result from an actual call. :)
// Right
<Link to="/" onClick={this.deleteDoc}> Delete </Link>