I am trying to set the state inside a method, i have a simple voting system (Yes or No) if you click Yes the state needs to be a string up and if you click No the state needs to be down
I am having trouble merging the method voteHandler and setVote
Here is my component :
import React, { useState, useContext } from 'react';
import {AnswerContext} from './AnswerWrapper';
const AnswerItem = (props) => {
let indexPlus;
const indexCount = (index) => {
indexPlus = index;
return indexPlus;
}
const { active, setActive } = useContext(AnswerContext)
const [vote, setVote] = useState();
const voteHandler = (e, index) => {
e.preventDefault();
setActive(index);
setVote(""); // this might be "up" or "down"
// I am sending this to a parent component
props.onVote ({
vote : vote,
answerID : index
})
}
return (
<div>
<button onClick={(e) => voteHandler(e, props.index)}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
<button onClick={(e) => voteHandler(e, props.index)}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>
</div>
)
}
export default AnswerItem;
You can send the value when you bind the onClick:
<button onClick={(e) => voteHandler(e, props.index, 'up')}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
<button onClick={(e) => voteHandler(e, props.index, 'down')}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>
And use that in your voteHandler:
const voteHandler = (e, index, value) => {
e.preventDefault();
setActive(index);
setVote(value); // this might be "up" or "down"
// I am sending this to a parent component
props.onVote ({
vote : vote,
answerID : index
})
}
When you do:
setVote(value); // this might be "up" or "down"
// I am sending this to a parent component
props.onVote ({
vote : vote,
answerID : index
})
You will not get the updated vote since setState is asynchronous. If you want to call props.onVote on every vote and active change, use a useEffect:
const AnswerItem = (props) => {
let indexPlus;
const indexCount = (index) => {
indexPlus = index;
return indexPlus;
}
const { active, setActive } = useContext(AnswerContext)
const [vote, setVote] = useState();
useEffect(() => {
props.onVote ({
vote : vote,
answerID : active
})
}, [vote, active])
const voteHandler = (e, index) => {
e.preventDefault();
setActive(index);
setVote("");
}
return (
<div>
<button onClick={(e) => voteHandler(e, props.index)}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
<button onClick={(e) => voteHandler(e, props.index)}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>
</div>
)
}