I am just starting to learn reactjs and one of my first use cases is creating a button where depending if user clicks on/off I will make a fetch call and pass this information into one of the variables.I want to eliminate having a function for each type of button. So I figured I could just pass in the value as a prop and use that for the fetch call. You will see this when I try to pass in "this.props.statusnumber".
Unfortunately I get the following error;
Parsing error: this is a reserved word...
Here is my code, any help would be greatly appreciated since I cant find anything online.
import React from 'react';
const API = 'https://use1-wap.tplinkcloud.com/?token=HIDDEN';
let opts = {"method":"passthrough", "set_dev_alias":{"alias":"supercool plug"}, "params": {"deviceId": "HIDDEN", "requestData": "{\"system\": {\"set_relay_state\":{\"state\":0}}}" }};
let headerInfo = {'Content-Type': 'application/json','Version':'1','q': '0.01'};
let statusnumber = {};
export class Name extends React.Component {
constructor(props) {
super(props);
this.state = {
position: "off",
object: [],
};
this.switchStatus = this.switchStatus.bind(this);
this.statusnumber = this.statusnumber.bind(this);
}
switchStatus() {
opts.params.requestData = "{\"system\":{\"set_relay_state\ {\"state\":"+{this.props.statusnumber}+"}}}";
let positionStatus = (this.props.statusnumber === 0) ? "off" : "on";
console.log(this.props.statusnumber);
fetch(API, {
method : 'POST',
headers: headerInfo,
body : JSON.stringify(opts)
})
.then(response => response.json())
.then(data => this.setState({ object: data.object, position: positionStatus}))
};
render() {
const { object } = this.state;
return (
<div>
<button onClick={this.switchStatus} statusnumber={1}>On</button>
<button onClick={this.switchStatus} statusnumber={0}>Off</button>
<p>Current position: {this.state.position}</p>
<p>testing function</p>
</div>
);
}
}
Related
I'm using axios to get data from an endpoint. I'm trying to store this data inside the state of my React component, but I keep getting this error:
Error: Results(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I've struggled with many approaches: arrow functions etc., but without luck.
export default class Map extends Component {
constructor() {
super();
this.state = {
fillColor: {},
selectedCounty: "",
dbResponse: null,
};
}
getCounty(e) {
axios.get("/getWeatherData?county=" + e.target.id)
.then((response) => {
this.setState(prevState => {
let fillColor = {...prevState.fillColor};
fillColor[prevState.selectedCounty] = '#81AC8B';
fillColor[e.target.id] = '#425957';
const selectedCounty = e.target.id;
const dbResponse = response.data;
return { dbResponse, selectedCounty, fillColor };
})
}).catch((error) => {
console.log('Could not connect to the backend');
console.log(error)
});
}
render() {
return (
<div id="map">
<svg>big svg file</svg>
{this.state.selectedCounty ? <Results/> : null}
</div>
)
}
I need to set the state using prevState in order to update the fillColor dictionary.
Should this be expected? Is there a workaround?
So ideally my parent component is mapping through a database and rendering them based on the user's choice. Right now right now the information is being passed correctly and the app is rendering what I need it too (the card component) in the correct amount however it is full of dummy info. (Someone clicks beer, there are three beer types in the database, the app renders three card components full of dummy info).
Here is the parent component:
class Render extends React.Component {
constructor(props) {
super(props);
console.log("Here are your props", props);
}
componentDidMount() {
let options = {
method: 'GET',
url: 'http://localhost:8080/drinks',
};
let drinks = [];
console.log("this is",this);
axios.request(options)
.then( (response) => {
console.log(response);
this.setState({ drinks: response.data })
})
.catch(function (error) {
console.log(error);
});
}
render() {
console.log("this.state is",[this.state])
let stateArray = [this.state]
if (stateArray[0] == null) {
console.log("returning with nothing")
return <div></div>
}
let firstElement = stateArray[0];
let drinks = firstElement.drinks;
let drinkChoice = this.props.reduxState.drinkChoice
console.log("drinkchoice is here" , drinkChoice)
// const props = this.props
console.log("just drinks", drinks)
let drinkInfo = {
type: this.state.drinks.type,
name: this.state.drinks.name,
manufacturer: this.state.drinks.manufacturer,
rating: this.state.drinks.rating,
date: this.state.drinks.date,
description: this.state.drinks.description,
favorite: this.state.drinks.favorite
}
let cardComponents = drinks.map((drink) =>{
if (drink.type === drinkChoice) {
return (<InfoCard props={this.state.drinks} />)
} else {
return <div>Nothing to Report</div>
}})
return (
<div>
<div>{cardComponents}</div>
</div>
)
}
}
export default Render
Now I need it to render the actual database information for each entry. In the child/cardcomponent- I can console.log the props and it will correctly show the right information. It's getting through. But anytime I try to be more specific ( props.name ) it turns to undefined.
I have been at this for days and i'm so confused. The information is right there! I just need to grab it!
Here is the code for the child/card component:
const useStyles = makeStyles(theme => ({
root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
expand: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: 'rotate(180deg)',
},
avatar: {
backgroundColor: red[500],
},
}));
export default function InfoCard(props) {
const classes = useStyles();
if( props.length <= 0 ) {
return (<div></div>);
} else {
console.log("props are here")
console.log( props )
console.log("props dot name")
console.log ( props.name )
}
props.each(function (drink) {
console.log(drink.name);
});
return (
<Card className={classes.root}>
title = { props.name }
</Card>
);
}
Where have I gone wrong? I feel like i've tried every possible iteration of console.log and drink.name. I'm at the end of my rope.
Thanks for any and all guidance.
sccreengrab of console log
What you're seeing in your log of props is an array of objects. Those objects have names, but the array itself does not, so when you console.log(props.name) it doesn't work and you see undefined. If you try console.log(props[0].name), for instance, you should see a name.
But what's strange here is that props should NOT be an array: it should be an object (whose keys map to the JSX element's attributes). For instance:
<InfoCard name="Bob"/>
would create a props object of:
{name: 'Bob'}
But when you log your props, you see an array, and that means you've somehow/somewhere replaced the actual props object with an array. Without seeing the code where you actually create <Infocard>, I can't speak to the details.
P.S. It might be possible to do this if you did something like:
`<MyComponent {...[{ name: 'Bob']} />`
... but honestly I'm not sure if that even works, and it seems like a bad idea even if it does.
I am a newbie, and am trying to build a simple restaurant recommendation web app using AWS and React. So, I am using this chat window(https://www.npmjs.com/package/react-chat-window). Basically, when the user types something, the chatbot gets triggered and asks questions like "what kind of food do you want?" So far, I am able to pass the user's input and get the response back from the AWS. I can log the response to the console and verify it. But I have trouble getting the response displayed in the chatbox.
Here is the snippet of the code
class chatBox extends Component {
constructor() {
super();
this.state = {
messageList: chatHistory,
newMessagesCount: 0,
isOpen: false
};
}
// message is the user's input
_onMessageWasSent(message) {
var body = {
messages: message.data['text']
}
// every time the user types something, this function passes the user's input to AWS
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) { // result contains the response to the user's input
var text = result.data.body
console.log(text) // logs the response to the user's input
console.log(text.length)
}).catch(function (result) {
});
this.setState({ //this displays what the user types
messageList: [...this.state.messageList, message]
})
}
// This is a function that displays the input of the other side
// I can manually test it and see that whatever I pass to this function gets displayed as
// the other person's speech, not the user.
_sendMessage(text) {
console.log("sendMessage")
if (text.length > 0) {
this.setState({
messageList: [...this.state.messageList, {
author: 'them',
type: 'text',
data: { text }
}],
newMessagesCount: this.state.newMessagesCount + 1
})
}
}
As can be seen, I am logging the response to the console. Now, I want to get the response displayed so I tried inside the constructor
this._onMessageWasSent = this._sendMessage.bind(this)
and calling the function inside _onMessageSent
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) { // result contains the response to the user's input
var text = result.data.body
console.log(text) // logs the response to the user's input
console.log(text.length)
this._sendMessage(text) // Calling the function
}).catch(function (result) {
});
this.setState({ //this displays what the user types
messageList: [...this.state.messageList, message]
})
}
I can see that the _sendMessage function gets triggered, because I have a console.log. But now the chatbox displays neither the user and the chatbot. If I don't bind this._onMessageWasSent = this._sendMessage.bind(this), at least I get the user displayed.
What could be the problem??
This is my render()
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent.bind(this)}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected.bind(this)}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick.bind(this)}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}
UPDATE
class chatBox extends Component {
constructor(props) {
super(props);
this.state = {
messageList: chatHistory,
newMessagesCount: 0,
isOpen: false
};
this._onMessageWasSent = this._onMessageWasSent.bind(this);
this._onFilesSelected = this._onFilesSelected.bind(this);
this._handleClick = this._handleClick.bind(this);
this._sendMessage = this._sendMessage.bind(this);
}
_onMessageWasSent(message) {
var body = {
messages: message.data['text']
}
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) {
var text = result.data.body
console.log(text)
console.log(text.length)
this._sendMessage(text)
}).catch(function (result) {
});
this.setState({
messageList: [...this.state.messageList, message]
})
}
_sendMessage(text) {
console.log("sendMessage")
if (text.length > 0) {
this.setState({
messageList: [...this.state.messageList, {
author: 'them',
type: 'text',
data: { text }
}],
newMessagesCount: this.state.newMessagesCount + 1
})
}
}
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}
You have to bind your class methods in class components in order to call them with this. But you have to do this, e.g. in the constructor BUT not in your render function!
Check out this very nice explanation on why and how to bind your functions.
constructor( props ){
super( props );
this._onMessageWasSent = this._onMessageWasSent.bind(this);
this._onFilesSelected = this._onFilesSelected.bind(this);
this._handleClick = this._handleClick.bind(this);
this._sendMessage = this._sendMessage.bind(this);
}
In your render function, just pass the functions like follows:
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}
Also, there is one more issue. This binding is a tricky thing in JavaScript and function vs ()=>{} arrow functions do treat this differently. In your case, just use an arrow function instead.
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then((result) => {
var text = result.data.body
console.log(text)
console.log(text.length)
this._sendMessage(text)
}).catch(function (result) {
});
This will make sure that this inside your then-callback function is still the this that you expect it to be. This is why, if you would refactor all your functions (_onMessageWasSent, _onMessageWasSent, _onFilesSelected, handleClick, _sendMessage ) to arrow functions, there is no need anymore to bind them to this in the constructor.
See this for example:
_onMessageWasSent = (message) => {
// your function body
}
You could already get rid of the line this._onMessageWasSent = this._onMessageWasSent.bind(this);.
Read more about this binding in functions at w3school.
I am trying to add sorting to my movie app, I had a code that was working fine but there was too much code repetition, I would like to take a different approach and keep my code DRY. Anyways, I am confused as on which method should I set the state when I make my AJAX call and update it with a click event.
This is a module to get the data that I need for my app.
export const moviesData = {
popular_movies: [],
top_movies: [],
theaters_movies: []
};
export const queries = {
popular:
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=###&page=",
top_rated:
"https://api.themoviedb.org/3/movie/top_rated?api_key=###&page=",
theaters:
"https://api.themoviedb.org/3/movie/now_playing?api_key=###&page="
};
export const key = "68f7e49d39fd0c0a1dd9bd094d9a8c75";
export function getData(arr, str) {
for (let i = 1; i < 11; i++) {
moviesData[arr].push(str + i);
}
}
The stateful component:
class App extends Component {
state = {
movies = [],
sortMovies: "popular_movies",
query: queries.popular,
sortValue: "Popularity"
}
}
// Here I am making the http request, documentation says
// this is a good place to load data from an end point
async componentDidMount() {
const { sortMovies, query } = this.state;
getData(sortMovies, query);
const data = await Promise.all(
moviesData[sortMovies].map(async movie => await axios.get(movie))
);
const movies = [].concat.apply([], data.map(movie => movie.data.results));
this.setState({ movies });
}
In my app I have a dropdown menu where you can sort movies by popularity, rating, etc. I have a method that when I select one of the options from the dropwdown, I update some of the states properties:
handleSortValue = value => {
let { sortMovies, query } = this.state;
if (value === "Top Rated") {
sortMovies = "top_movies";
query = queries.top_rated;
} else if (value === "Now Playing") {
sortMovies = "theaters_movies";
query = queries.theaters;
} else {
sortMovies = "popular_movies";
query = queries.popular;
}
this.setState({ sortMovies, query, sortValue: value });
};
Now, this method works and it is changing the properties in the state, but my components are not re-rendering. I still see the movies sorted by popularity since that is the original setup in the state (sortMovies), nothing is updating.
I know this is happening because I set the state of movies in the componentDidMount method, but I need data to be Initialized by default, so I don't know where else I should do this if not in this method.
I hope that I made myself clear of what I am trying to do here, if not please ask, I'm stuck here and any help is greatly appreciated. Thanks in advance.
The best lifecycle method for fetching data is componentDidMount(). According to React docs:
Where in the component lifecycle should I make an AJAX call?
You should populate data with AJAX calls in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.
Example code from the docs:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}
Bonus: setState() inside componentDidMount() is considered an anti-pattern. Only use this pattern when fetching data/measuring DOM nodes.
Further reading:
HashNode discussion
StackOverflow question
I have the following code which retrieves Google Places Reviews based on Google Places API. I have incorporated the logic to work as a React life cycle component. Currently, I am unable to setState and correctly bind the object. I could use some help understanding where my logic is failing.
export default class Reviews extends React.Component{
constructor(props){
super(props);
this.state = {
places: []
}
}
componentDidMount(){
let map = new google.maps.Map(document.getElementById("map"), {
center: {lat:40.7575285, lng: -73.9884469}
});
let service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJAUKRDWz2wokRxngAavG2TD8'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(place.reviews);
// Intended behavior is to set this.setState({places.place.reviews})
}
})
}
render(){
const { places } = this.state;
return(
<div>
<p>
{
places.map((place) => {
return <p>{place.author_name}{place.rating}{place.text}</p>
})
}
</p>
</div>
)
}
}
You can't use this that way in a callback. When the function is called the this in, this.setState({places.place.reviews}) doesn't point to your object. One solution is to use => function notation which will bind this lexically.
service.getDetails({
placeId: 'ChIJAUKRDWz2wokRxngAavG2TD8'
}, (place, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(place.reviews);
this.setState({places: place.reviews})
}
})
}
Alternatively you can make a new reference to this and us it in the function. Something like
var that = this
...
that({places.place.reviews})
The first option is nicer, but requires an environment where you can use ES6. Since your using let you probably are okay.
With some tweaking -- I got the code to work! Thank you.
render(){
const { places } = this.state;
return(
<div>
<p>
{
places.map((place) => {
if(place.rating >= 4){
return <p key={place.author_name}>{place.author_name}{place.rating}{place.text}</p>
}
})
}
</p>
</div>
)
}