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;

CodePudding user response：

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
        })
    }

Warning

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>
    )
}