score:0

 const [votes, setVotes] = useState(new Array(6).fill(0));

 return (
    <div>
      <h1>{anecdotes[selected]}</h1>
      <button onClick={ () => setSelected(Math.floor(Math.random() * 6) ) }>Next Anecdote</button>
      
      <button onClick={ () => { setVotes(prevVotes => {
       const upd = [...prevVotes];
       upd[selected] += 1;
       return upd; 
})}  }>Vote</button>
      <p>votes: {votes[selected]}</p>
    </div>
  )

score:0

import React, { useState, useReducer } from "react";

const initialState = [
  { text: "If it hurts, do it more often", votes: 0 },
  {
    text: "Adding manpower to a late software project makes it later!",
    votes: 0
  },
  {
    text:
      "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.",
    votes: 0
  },
  {
    text:
      "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
    votes: 0
  },
  { text: "Premature optimization is the root of all evil.", votes: 0 },
  {
    text:
      "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.",
    votes: 0
  },
  {
    text:
      "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",
    votes: 0
  }
];

const reducer = (state, action) => {
  if (action.type === "VOTE_UP") {
    return state.map((item, index) => {
      if (index === action.index) {
        item.votes = item.votes + 1;
      }
      return item;
    });
  }
};

const App = () => {
  const [anecdotes, dispatch] = useReducer(reducer, initialState);
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <div>
      <h1>{anecdotes[selectedIndex].text}</h1>
      <button
        onClick={() => {
          setSelectedIndex(Math.floor(Math.random() * 6));
        }}
      >
        Next Anecdote
      </button>

      <button
        onClick={() => {
          dispatch({ type: "VOTE_UP", index: selectedIndex });
        }}
      >
        Vote
      </button>
      <p>votes: {anecdotes[selectedIndex].votes}</p>
    </div>
  );
};

export default App;

score:1

export default function App() {
  const [selected, setSelected] = useState(0);

  // create vote counts array from anecdotes array and initialize to zeros
  const [votes, setVotes] = useState(Array.from(anecdotes).fill(0));

  return (
    <div>
      <h1>{anecdotes[selected]}</h1>
      <button
        onClick={() => setSelected(
          // use anecdote array length
          Math.floor(Math.random() * anecdotes.length))
        }
      >
        Next Anecdote
      </button>

      <button
        onClick={() =>
          setVotes((votes) =>
            // immutable update, map previous state to next
            votes.map((count, index) =>
              index === selected ? count + 1 : count
            )
          )
        }
      >
        Vote
      </button>
      <p>votes: {votes[selected]}</p> // display selected anecdote vote count
    </div>
  );
}

Related Query

More Query from same tag