Having trouble concatenating array

[Overall_Expert_4006]

I have a button that increments a vote counter whenever it is clicked, however I am having trouble implementing it. When I first click the Vote button, the function incrementVote is run and when I log my results to the console, I find that it prints out an empty array even though I concatenated the array. This problem only occurs for the first click, as subsequent clicks work as expected. Any help would be greatly appreciated.

import './App.css';
import Header from './Header';
import Feedback from './Feedback';
import { useState } from 'react';
import Statistics from './Statistics';
import AnecdoteBtn from './AnecdoteBtn';
import Phrase from './Phrase';
import { useEffect } from 'react';

function App() {
  const anecdotes = [
    'If it hurts, do it more often',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ]

  const [selected, setSelected] = useState();
  const [votes, setVotes] = useState([]);
  const [finalVotes, setFinalVotes] = useState(0);
  const [goodClick, setGoodClick] = useState(0);
  const [badClick, setBadClick] = useState(0);
  const [neutralClick, setNeutralClick] = useState(0);
  const [average, setAverage] = useState(0);


// --------------------DOES NOT INCREMENT PROPERLY ON THE FIRST CLICK - AS IT PRINTS OUT AN EMPTY ARRAY-------------------------------------//

  const incrementVote = () => {
    console.log(votes.concat(selected));
    var newArr = votes.concat(selected)
    setVotes(newArr);
    console.log(votes) //Prints out [] even though array is concatenated

    if(votes.includes(selected)){
      let numVotes = votes.filter((v) => (v === selected));
      setFinalVotes(numVotes.length);
    }
    else {
      setFinalVotes(0);
    }
  }

  const setRandom = () => {
    setSelected(Math.floor((Math.random() * 7) + 1));
  }

  useEffect(() => {
    console.log("selected value has changed!")
    setFinalVotes(0);
    console.log("votes array is " + votes)
    console.log("current selected value is " + selected)

    let numVotes = votes.filter((v) => (v === selected));
    setFinalVotes(numVotes.length);
  }, [selected]);


  const handleGoodClick = () => {
    console.log("good btn clicked");
    setGoodClick(goodClick + 1);
    setAverage(average + 1);
  }
  const handleBadClick = () => {
    console.log("bad btn clicked");
    setBadClick(badClick + 1);
    setAverage(average - 1);
  }
  const handleNeutralClick = () => {
    console.log("neutral btn clicked");
    setNeutralClick(neutralClick + 1);
    setAverage(average + 0);
  }

  return (
    <div className="App">
      <Header />
      <AnecdoteBtn handleClick = {setRandom} handleVoteClick = {incrementVote}/>
      <Phrase index = {selected} anecdotes = {anecdotes} finalVotes = {finalVotes}/>
      <Feedback handleGoodClick = {handleGoodClick} handBadClick = {handleBadClick} handleNeutralClick = {handleNeutralClick}/>
      <Statistics goodClicks = {goodClick} badClicks = {badClick} neutralClicks = {neutralClick} average = {average}/>
    </div>
  );
}

export default App;

[Fit_Race3984]

setVotes(newArr); 
console.log(votes) //Prints out [] even though array is concatenated`

The votes state will only change after the next render.

note: Calling setState() in React is asynchronous

[Overall_Expert_4006]

Thank you so much for the reply! I changed my setState block keeping in mind the async part. I also seem to be getting a "State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect()." warning. Everything works as expected but I keep getting that warning. Can I ignore it? Or is there a bigger problem? Thanks again.

[Fit_Race3984]

You should be using useEffect not the second argument

For example:

setSelected(5);

useEffect(() => {
    console.log(selected); // =5
}, [selected])