I am trying to add a like counter per challenge. Every time I click on the like icon, the handleLike() starts working and should add 1 like to that specific challenge. I tried to do this in my handleLike() function but struggle to make it work. I guess my approach is not changing the like in the specific challenge.
class Allchallenges extends React.Component {
constructor() {
super()
this.state = {
challenges: []
}
this.handleLike=this.handleLike.bind(this)
}
componentDidMount(){
axios({
method: "GET",
url: `${process.env.REACT_APP_API_BASE}/allchallenges`,
withCredentials: true
})
.then(response => {
console.log(response)
let challengeslist = response.data;
this.setState({challenges: challengeslist})
})
.catch(error => {
console.log("You've made an error charles: ",error)
})
}
handleLike(challengeId){
console.log("This is the handlelikebutton speaking!")
const likedchallenge = this.state.challenges.filter(challenge => challenge._id === challengeId)
likedchallenge.likes++
}
render(){
return (
<DefaultLayout>
<div className="challengeoverviewlist">
<h1>All challenges</h1>
<div className="challengeboxes">
{
this.state.challenges.map(challenge =>
(
<div className="totalbox" key={challenge._id}>
<div className="likedislikesbox">
<div className="likecontainer">
<div className="leftalignment"><FontAwesomeIcon icon={faThumbsUp} onClick={()=>this.handleLike(challenge._id)}/></div>
<p className="likestat">{challenge.likes}</p>
</div>
<div className="dislikecontainer">
<div className="leftalignment"><FontAwesomeIcon icon={faThumbsDown}/></div>
<p className="dislikestat">{challenge.dislikes}</p>
</div>
<div className="satisfactioncontainer">
<div className="leftalignment"><FontAwesomeIcon icon={faBalanceScale}/></div>
<p className="satisfactionstat">{challenge.likes/(challenge.dislikes + challenge.likes)*100}%</p>
</div>
</div>
<Challengebox
key={challenge._id}
id={challenge._id}
title={challenge.title}
description={challenge.description}
/>
<button className="deletebutton" onClick={()=> this.onDelete(challenge._id)}>
Delete
</button>
</div>
))
}
</div>
</div>
</DefaultLayout>
)
}
}
export default Allchallenges
const challengeSchema = new Schema({
title: String,
description: String,
initiator: {type: Schema.Types.ObjectId, ref:"User"},
likes: { type: Number, default: 0 },
dislikes: { type: Number, default: 0 },
satisfaction: { type: Number, default: 0 },
likealready: { type: Boolean, default: false },
dislikealready: { type: Boolean, default: false }
})
I can't speak to specific error messages since none were provided, but one observation:
You have:
handleLike(challengeId){
console.log("This is the handlelikebutton speaking!")
const likedchallenge = this.state.challenges.filter(challenge => challenge._id === challengeId)
likedchallenge.likes++
}
If you look at what Array.prototype.filter() does, it returns a copy of an array that matches your condition.
So in this case, you have potentially filtered the array to one item (with the matching challenge ID), but you are manipulating it as if it is the challenge object, not an array of up to one challenge.
You'd end up with something like
const likedchallenge = [Challenge];
// Try to increment likes
likedchallenge.likes++;
// This tries to increment lies on the ARRAY containing the challenge object
You probably want to GET the challenge object, e.g. using Array.prototype.find() instead.
UPDATE: Regarding React's setState
As noted in the comments below, manipulating state directly is not something you want to do. Instead, you should rely on informing React of your state change. Roughly, it might look something like:
handleLike(challengeId) {
this.setState(state => {
challenges: state.challenges.map(c => {
if (c._id === challengeId) {
c.likes++;
}
return c;
}),
});
}
Related
What I've tried and my issue
I started with creating an external function and running it through the onClick... this works partly as it sends the alerts on click. See the services page on test.ghostrez.net.
Click the small images to trigger the alerts that show which if statement, thestate.active:value, and the state.id:value.
So I know the correct statements are being triggered.
My problem is I keep having state[i].setState is not a function returned rather than the state being set as intended.
I have placed the function internally and externally to the class Player and it returned the same issue.
I converted the function to an internal arrow function as suggested HERE.
I converted it to a const changeActiveField = () => {stuff in here}
I attempted to bind it const changeActive = changeActiveField.bind(this) *as suggested HERE and HERE
Each attempt returning the same Error
this is what the debug console returns
Here is my current function its process > 1. if the active object in state has the same id as image clicked - do nothing, 2. if the active object has a different id to the image clicked setState active:value to false then come back and find the object with the id === id of the image clicked and setState active:true from false.
function changeActiveField(im, state) {
console.log(state);
for (var i = 0; i < state.length; i++) {
if (state[i].active === true && state[i].id === im) {
return alert("if " + state[i].active + " " + state[i].id);
} else if (state[i].active === true && state[i].id !== im) {
alert(" elseif set false " + state[i].active + " " + state[i].id);
state[i].setState(false);
} else if (state[i].id === im) {
alert("elseif make true " + state[i].active + " " + state[i].id);
state[i].setState({ active: true });
return;
} else {
return alert("Nope");
}
}
}
changeActiveField is called here
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => changeActiveField(i.id, this.state.ids)}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
<h2>
{i.id} {i.active ? "true" : "false"}
</h2>
</>
))}
</div>
No joke I've been trying to resolve this for 4 days now. I'm stumped.
It appears that you are trying to setState on an individual id, but what you are actually doing is trying to call id.setState
From the code you supplied, each id looks basically like this:
{active: //true/false, id: //some Int}
but in reality your code is looking for this...
{active: //true/false, id: //some Int, setState: () => //do something here}
You'll need to handle how to find your specific id object in that array of ids, and then update your full state with the current state AND the modification you are making.
EDIT://my fault, wasn't thinking.
I would recommend making a copy of your state array in a new variable, then mapping through that new array variable making your mutations. Then set your state based on that new array objects...
let newIdArr = this.state.ids
newIdArr.map(id => //do your stuff here...)
this.setState({...this.state, ids: newIdArr})
Lastly, when you setState(false) you are overwriting ALL your state to where it will be just false, losing all your ids along the way.
This is the end product of too many days pulling my hair out... but it works now and hopefully, it helps someone else. (full component code last)
I used an anonymous function in the Image that is being rendered. This finds and updates the object in the this.state array, first, it finds the ids that don't match the value passed in from the "carouselitem" and updates their active values to false, then it finds the id that matches the value passed in and updates it to true.
The old function changeActiveField is now
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
I have also moved my firstActiveId into the class. This finds the array object with active: true and returns the id value which is placed in the activevid to display and play the appropriate video.
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
The firstActiveId is used like this to provide playback.
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
TIP: don't over-complicate things like I do
Full Component
import React, { Component } from "react";
import { Embed, Image } from "semantic-ui-react";
import "./Player.css";
export default class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
ids: [
{
id: "iCBvfW08jlo",
active: false,
},
{
id: "qvOcCQXZVg0",
active: true,
},
{
id: "YXNC3GKmjgk",
active: false,
},
],
};
}
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
render() {
return (
<div className="carouselwrap">
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
</>
))}
</div>
</div>
);
}
}
I'm struggling while creating an element that is passed by the .map function. Basically, I want my webpage to create a div element with some date in it when a button is clicked for that I'm using a .map function but it isn't working out.
const handleSubmit = (e) => {
e.preventDefault();
const data = {title:`${title}`, desc:`${desc}`, date:`${date}`};
data.map(userinfo =>{
return(<div>
<h1>{userinfo.title}</h1>
</div>)
})
console.log(data);
}
In reactJS, if we want to display our data in HTML webpage we usually do that in the render funciton.
We can use userInfo variable in the state object.
The userInfo data is hardcoded for demonstration purposes but you can also populate the userInfo variable either using API or in any other way you like.
Moreover, showUserInfo is another variable (initially false) that would render the data once it is set to true
this.state = {
userInfo: [
{
title: 'one',
desc: '',
date: new Date()
},
{
title: 'two',
desc: '',
date: new Date()
}
],
showUserInfo: false
}
On a click event we can set showUserInfo to true using setState function.
more on setState function via this link ->
https://medium.com/#baphemot/understanding-reactjs-setstate-a4640451865b
handleSubmit = async (event) => {
event.preventDefault();
this.setState(
{
...this.state,
showUserInfo: true
}
)
}
In the render function, if showUserInfo is false then userInfo.map is never going to render unless showUserInfo is set to true which we do using a click listener that is associated with our function handleSubmit.
render(){
return (
<div>
<button onClick={this.handleSubmit}>Click Me</button>
{ this.state.showUserInfo &&
this.state.userInfo.map(item =>(
<div>
<p> {item.date.toString()} </p>
</div>
) ) }
</div>
);
}
Overall the result looks a something like this.
export default class App extends React.Component {
constructor() {
super();
this.state = {
showUserInfo: false,
userInfo: [
{
title: 'one',
desc: '',
date: new Date()
},
{
title: 'two',
desc: '',
date: new Date()
}
],
}
}
handleSubmit = async (event) => {
event.preventDefault();
this.setState(
{
...this.state,
showUserInfo: true
}
)
}
render(){
return (
<div>
<button onClick={this.handleSubmit}>Click Me</button>
{ this.state.showUserInfo &&
this.state.userInfo.map(item =>(
<div>
<p> {item.date.toString()} </p>
</div>
) ) }
</div>
);
}
}
I'm trying to map through my state, where I have collected data from an external API.
However, when I do i get this error here:
TypeError: this.state.stocks.map is not a function
I want to render the results to the frontend, through a function so that the site is dynamic to the state.favorites.
Though the console.log(), I can see that the data is stored in the state.
I have found others with a similar issue, but the answers did not work out.
UPDATE:
I have changed the componentDidMount() and it now produces an array. The issue is that I get no render from the renderTableData() functions.
console.log shows this array:
0: {symbol: "ARVL", companyName: "Arrival", primaryExchange: "AESMSBCDA)LNKOS/ TLTE(N GAEQLGAR ", calculationPrice: "tops", open: 0, …}
1: {symbol: "TSLA", companyName: "Tesla Inc", primaryExchange: " RNK EAASGTDACLN)LE/OGMELAQSTB (S", calculationPrice: "tops", open: 0, …}
2: {symbol: "AAPL", companyName: "Apple Inc", primaryExchange: "AMTGS/C) AALGDRSTNLEOEL(S BAE NQK", calculationPrice: "tops", open: 0, …}
length: 3
__proto__: Array(0)
This is my code:
import React, { Component } from 'react'
import './Table.css';
class Table extends Component {
constructor (props) {
super(props);
this.state = {
favorites: ['aapl', 'arvl', 'tsla'],
stocks: []
};
}
componentDidMount() {
this.state.favorites.map((favorites, index) => {
fetch(`API`)
.then((response) => response.json())
.then(stockList => {
const stocksState = this.state.stocks;
const stockListValObj = stockList;
console.log(stocksState)
console.log(stockListValObj)
this.setState({
stocks: [
... stocksState.concat(stockListValObj)
]
}, () => { console.log(this.state.stocks);});
})
})
}
renderTableData() {
this.state.stocks.map((stocks, index) => {
const { companyName, symbol, latestPrice, changePercent, marketCap } = stocks //destructuring
return (
<div key={symbol} className='headers'>
<div className='first-value'>
<h4>{companyName}</h4>
<h4 className='symbol'>{symbol}</h4>
</div>
<div className='align-right'>
<h4>{latestPrice}</h4>
</div>
<div className='align-right'>
<h4 className='changePercent'>{changePercent}</h4>
</div>
<div className='align-right'>
<h4>{marketCap}</h4>
</div>
</div>
);
})
}
render() {
return (
<div className='table'>
<h1 id='title'>Companies</h1>
<div className='headers'>
<h4 className='align-right'></h4>
<h4 className='align-right'>Price</h4>
<h4 className='align-right'>+/-</h4>
<h4 className='align-right'>Market Cap</h4>
</div>
<div>
{this.renderTableData()}
</div>
</div>
)
}
}
export default Table;
You should always aim in making single state update, try reducing the state update to single update.
I suggest 2 solution:
Move the data fetch section into a separate function, update a temporary array variable return the variable at the end of the execution.
async dataFetch() {
const sampleData = this.state.stocks || [];
await this.state.favorites.forEach((favorites, index) => {
fetch(`API`)
.then((response) => response.json())
.then((stockList) => {
sampleData.push(stockList);
// const stocksState = this.state.stocks;
// const stockListValObj = stockList;
// console.log(stocksState);
// console.log(stockListValObj);
// this.setState({
// stocks: [
// ... stocksState.concat(stockListValObj)
// ]
// }, () => { console.log(this.state.stocks);});
});
});
return Promise.resolve(sampleData);
}
componentDidMount() {
this.dataFetch().then((stockValues) => {
this.setState({ stocks: stockValues });
});
}
Use Promise.all() this return a single array value which would be easier to update on to the stock state.
Suggestion : When not returning any values from the array try using Array.forEach instead of Array.map
Return keyword is missing in renderTableData
renderTableData() {
this.state.stocks.map((stocks, index) => { ...});
to
renderTableData() {
return this.state.stocks.map((stocks, index) => { ...});
I would say that this is happening because on the first render, the map looks into state.stock and it's an empty array. After the first render, the componentDidMount method is called fetching the data.
I would suggest to just wrap the map into a condition. If stock doesn't have any object, then return whatever you wish (null or a loader/spinner for example).
It's enough to add it like this for not returning anything in case the array is empty (it will be filled after the first render, but this is useful as well to return error message in case the fetch fails):
this.state.stocks.length > 0 && this.state.stocks.map((stocks, index) => {
I am just learning to program and am writing one of my first applications in React. I am having trouble with an unexpected mutation that I cannot find the roots of. The snippet is part of a functional component and is as follows:
const players = props.gameList[gameIndex].players.map((item, index) => {
const readyPlayer = [];
props.gameList[gameIndex].players.forEach(item => {
readyPlayer.push({
id: item.id,
name: item.name,
ready: item.ready
})
})
console.log(readyPlayer);
readyPlayer[index].test = "test";
console.log(readyPlayer);
return (
<li key={item.id}>
{/* not relevant to the question */}
</li>
)
})
Now the problem is that readyPlayer seems to be mutated before it is supposed to. Both console.log's read the same exact thing. That is the array with the object inside having the test key as "test". forEach does not mutate the original array, and all the key values, that is id, name and ready, are primitives being either boolean or string. I am also not implementing any asynchronous actions here, so why do I get such an output? Any help would be greatly appreciated.
Below is the entire component for reference in its original composition ( here also the test key is replaced with the actual key I was needing, but the problem persists either way.
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
// import styles from './Lobby.module.css';
const Lobby = ( props ) => {
const gameIndex = props.gameList.findIndex(item => item.id === props.current.id);
const isHost = props.gameList[gameIndex].hostId === props.user.uid;
const players = props.gameList[gameIndex].players.map((item, index) => {
const isPlayer = item.id === props.user.uid;
const withoutPlayer = [...props.gameList[gameIndex].players];
withoutPlayer.splice(index, 1);
const readyPlayer = [];
props.gameList[gameIndex].players.forEach(item => {
readyPlayer.push({
id: item.id,
name: item.name,
ready: item.ready
})
})
const isReady = readyPlayer[index].ready;
console.log(readyPlayer);
console.log(!isReady);
readyPlayer[index].ready = !isReady;
console.log(readyPlayer);
return (
<li key={item.id}>
{isHost && index !== 0 && <button onClick={() => props.updatePlayers(props.gameList[gameIndex].id, withoutPlayer)}>Kick Player</button>}
<p>{item.name}</p>
{isPlayer && <button onClick={() =>props.updatePlayers(props.gameList[gameIndex].id, readyPlayer)}>Ready</button>}
</li>
)
})
let showStart = props.gameList[gameIndex].players.length >= 2;
props.gameList[gameIndex].players.forEach(item => {
if (item.ready === false) {
showStart = false;
}
})
console.log(showStart);
return (
<main>
<div>
{showStart && <Link to="/gameboard" onClick={props.start}>Start Game</Link>}
<Link to="/main-menu">Go back to Main Menu</Link>
</div>
<div>
<h3>Players: {props.gameList[gameIndex].players.length}/4</h3>
{players}
</div>
</main>
);
}
Lobby.propTypes = {
start: PropTypes.func.isRequired,
current: PropTypes.object.isRequired,
gameList: PropTypes.array.isRequired,
updatePlayers: PropTypes.func.isRequired,
user: PropTypes.object.isRequired
}
export default Lobby;
Note: I did manage to make the component actually do what it is supposed, but the aforementioned unexpected mutation persists and is still a mystery to me.
I have created a basic working example using the code snippet you provided. Both console.log statements return a different value here. The first one returns readyPlayer.test as undefined, the second one as "test". Are you certain that the issue happens within your code snippet? Or am I missing something?
(Note: This answer should be a comment, but I am unable to create a code snippet in comments.)
const players = [
{
id: 0,
name: "John",
ready: false,
},
{
id: 1,
name: "Jack",
ready: false,
},
{
id: 2,
name: "Eric",
ready: false
}
];
players.map((player, index) => {
const readyPlayer = [];
players.forEach((item)=> {
readyPlayer.push({
id: item.id,
name: item.name,
ready: item.ready
});
});
// console.log(`${index}:${readyPlayer[index].test}`);
readyPlayer[index].test = "test";
// console.log(`${index}:${readyPlayer[index].test}`);
});
console.log(players)
So I have this function:
send_data({ pathname, data })
{
$.ajax({
url: "src/php/search.php",
beforeSend: () =>{
// this.props.dispatch( { type: "set_loading", payload: true } );
},
data: {
type: "write_report",
part: pathname,
data
},
method: "post",
success: (r) =>
{
console.log("I am sending the data and getting something back")
console.log(r);
console.log("after r");
// this.props.dispatch( { type: "set_loading", payload: false } );
Important>> this.props.dispatch({ type: "set_report", payload: JSON.parse(r) });
}
})
}
What it does is that it sends some data to a php backend, which then responds with a json string, which I parse to create an object from.
This is my reducer code:
const componentReducer = (state = default_component, action) => {
switch(action.type)
{
case "set_report":
{
state = {...state, report: action.payload};
break;
}
}
return state;
I know the store is updating as when I print this.props.report (the object I'm currently using) it gets something different before and after:
Before:
Object {assessors=[3], report=Object, risks=[4], ...}
After:
Object {assessors=[2], report=Object, risks=[4], ...}
However the display does not update.
But!!! If I dispatch an empty object {}
this.props.dispatch({ type: "set_report", payload: {} });
it does re-render the component (I also have some code that checks whether or not the report object is empty and will thusly, return me an object)
Rendering component info (for brevity, things are missing):
add_repeat(default_user)
{
this.repeats.push(<StartMultiple key={this.count} default_user={default_user} users={this.props.users} id={this.count} delete_this={this.delete_this} />);
this.setState({ repeats: this.repeats });
this.count++;
}
render()
{
return(
<div>
<p><b>Date</b></p>
<span>Select the date when assessment was performed:</span>
<input id="datepicker" name="datepicker" type="text" readOnly/>
<div>
(<i>If the select is empty, but you know there should be someone in it. That person may be no longer at the institute. If that person should exist, please notify ITS.</i>)
</div>
<div>
{this.state.repeats}
</div>
<button className="btn btn-default" onClick={this.add_repeat.bind(this, "none")}>Add Assessor</button>
</div>
);
}
}
const Start = connect(
(store) =>
{
return {
number: store.component.number,
report_id : store.component.report_id,
assessors: store.component.report.assessors,
users: store.component.users,
date: store.component.report.report.date,
};
}) (StartComponent);
export default Start;
Child component:
render()
{
var { users } = this.props;
users = {"none": "", ...users};
return(
<div>
<p><b>Assessor</b></p>
<select name="assessor" defaultValue={this.props.default_user}>
{ Object.keys(users).map( (key, index) => <option key={index} value={users[key]}>{users[key]}</option> ) }
</select>
<span style={{ display : "inline-block", paddingLeft : "10px"}}>
<button className="btn btn-default" onClick={this.delete_this.bind(this, this )}>Delete</button>
</span>
</div>
);
}