stephengrider / reduxcasts Goto Github PK
View Code? Open in Web Editor NEWModern React with Redux
License: MIT License
Modern React with Redux
License: MIT License
At section 5) lesson 65) Adding Sparkline Charts I am getting the below error after I input a city name, then hit the submit button. After reading through some of these older issues and the Q&A, have tried uninstalling and installing react-sparklines in the following ways, with no luck:
$ npm install --save react-sparklines
$ npm install --save [email protected]
$ npm install --save [email protected]
$ npm install --save [email protected]
Uncaught TypeError: Super expression must either be null or a function, not undefined
i am getting this error i try npm r react-sparklines
npm i --save [email protected] both
that problem did not resolve please can you help me
Uncaught TypeError: Super expression must either be null or a function, not undefined
This references lecture #14. Any ideas why one would get the above error? I've checked to make sure that the file is placed in the correct location and looks very similar to the file you have in your video.
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Sparklines, SparklinesLine } from 'react-sparklines';
class WeatherList extends Component {
renderWeather(cityData) {
// console.log(cityData)
const name = cityData.city.name
const temps = cityData.list.map(weather=>weather.main.temp)
return (
<tr key={name}>
<td>{name}</td>
<td>
<Sparklines height={120} width={180} data={temps}>
<sparklinesLine color="red" />
</Sparklines>
</td>
</tr>
)
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
{this.props.weather.map(this.renderWeather)}
</tbody>
</table>
)
}
}
function mapStateToProps(state) {
return { weather: state.weather }
}
export default connect(mapStateToProps)(WeatherList)
I'm wrote my code above. and modify sparkline 1.7 to 1.6
Error was missing but never showing sparkline in my browser..
Anyone know?
Hi Stephen!,
I'm revisiting the course and thought about using React v-16.0 and newer versions in the
package.json file? Do you think you could update or should I try and do a pull request?
Hi Stephen,
Is there any reason why the bundle.js script sits outside the body tag?
Thanks,
Giovanni
The console pops up a 'TypeError: this.props.googleMapElement is undefined' error. Where do I put the API key?
Just downloaded the repo and ran the npm install and npm start.
The weather app is not running due to a type error.
Super expression must either be null or a function, not undefined
If you use react-router 2.0.0, you will get multiple warnings in the console. To avoid this, install react-router 2.5.2 instead.
If you already installed version 2.0.0, stop the server, and run npm uninstall [email protected]
then run npm install --save [email protected]
. When you restart the server npm start
, the errors should be gone.
`import React, {Component} from "react";
import {connect} from "react-redux";
import {Sparklines, SparklinesLine} from 'react-sparklines';
class WeatherList extends Component {
renderWeather(cityData) {
/* if(typeof cityData==='undefined'){
return cityData
} */
const name=cityData.city.name;
const temps =cityData.list.map(weather=> weather.main.temp);
return (
<tr key={name}>
<td>{name}</td>
<td>
<Sparklines height={120} width={100} data={temps}>
<SparklinesLine color="green"/>
</Sparklines>
</td>
</tr>
);
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
{ this .props.weather.map(this.renderWeather)}
</tbody>
</table>
);
}
}
function mapStateToProps({weather}) {
return
{ weather }; // {weather}== {weather: weather}
}
export default connect(mapStateToProps)(WeatherList);`
Can you update the source code to reflect this comment?
https://www.udemy.com/react-redux/learn/v4/questions/1828688
Hi Stephen,
I took your Modern React with Redux course in Udemy (and many others) and found it quite useful to build a profession (getting hired) and day to day activities.
I was developing a react app that uses redux, which uses express.js as backend API server and postgres as db (which is exactly like the example from your Docker and Kubernetes course). However, I hit a wall when the Redux state was reset (it issues the @@init event) every time route changes on the react app. How can I make it retain the state ? Can you please guide me ? (perhaps redirect me to an example)
Hello. The weather app example didn't work. I followed the tutorial and my code didn't work. I tried it with the code here, it didn't work either.
I also changed the api key to mine. It didn't help.
The error in the console
Uncaught TypeError: Super expression must either be null or a function, not undefined
Is it only for me? or does anybody have a same issue?
Hi Stephen,
I just started the Udemy course and appreciate it.
I noticed the first project 'video_browser' hasn't been updated in a year.
I updated the packages to the latest version and then fixed some syntax in 2 files:
Happy to push the changes and create a pull request. Thanks again
Hello,
If I am creating/update a post, how do I update the state in a reducer?
Thanks
When using the npm create-react-app the launch.json shows:
"scripts": {
"start": "react-scripts start",
....
This project uses webpack and has:
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
and I tried adding --inspect to node but nope..
Anybody else have any luck with this?
Thanks for this repo, it's so useful to play and learn.
It seems though that when you run npm install on a project folder it installs a lot of useless modules. Am I missing something or it's an issue?
This way the node_modules folders are on an average of 100-150 MB.
Thanks!
getting this error whenever i type something on search bar
Should create a .env file to store the Google API Key.
I downloaded it from the storage and ran it, but the error below comes out? Even though I replaced the API key with mine, I get the same error. How do we solve this?
`import axios from "axios";
const API_KEY = "MY API KEY";
const ROOT_URL = http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}
;
export const FETCH_WEATHER = "FETCH_WEATHER";
export function fetchWeather(city) {
const url = ${ROOT_URL}&q=${city},us
;
const request = axios.get(url);
return {
type: FETCH_WEATHER,
payload: request
};
}
`
how do i solve this?
could anyone provide how to upload to github?
Thanks
onDeleteClick() {
this.props.deletePost(this.props.params.id)
.then(() => { this.context.router.push('/'); });
}
export function deletePost(id) {
const request = axios.delete(${ROOT_URL}/posts/${id}${API_KEY}
);
return {
type: DELETE_POST,
payload: request
};
}
The function "deletePost" does not return a promise. so why the "then" method in function "onDeleteClick" can direct call?
API_KEY is hardcoded and should not be in version control: https://github.com/StephenGrider/ReduxCasts/blob/master/video_browser/src/index.js#L8 .
dotenv-webpack (https://github.com/mrsteele/dotenv-webpack) could be used to load the API_KEY from a local .env file.
Sparklines updated to 1.5.0, it now requires React 15.4.1 or higher. In your video, you specify npm install --save react-sparklines
, this probably needs to be adjusted to npm install --save [email protected]
or update the other project as you see fit. Thanks again, Stephen.
I dont know if i'm in the right place to report that but i just wanted to point out that in [email protected] it doesn't merge params from api file need to go back to 0.18
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.