React - Updating Object State

JavaScript
1

Hey,

Anyone know how I can set the selected vote to increment by 1 in ‘handleVote’?
Everything I’ve tried gives an error.

Thanks

import { useState } from 'react'


const Button = (props) => (
  <div>
    <button onClick={props.handleClick}>Random Anecdote</button>
  </div>
);

const Vote = (props) => {
  <div>
    <button onClick={props.handleClick}>Upvote!</button>
  </div>
}

const App = () => {
  const [selected, setSelected] = useState(0);
  const [votes, setVotes] = useState({
    0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0
  });

  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.',
    'The only way to go fast, is to go well.'
  ]


  const handleClick = () => {
    const randNum = Math.floor(Math.random() * anecdotes.length);
    setSelected(randNum);
  }

  const handleVote = () => {
    setVotes(prev => ({
      ...prev,
      // what do I put here to set the selected vote count + 1?
    }))
  }
  
  return (
    <div>
      <Button handleClick={handleClick} />
      <Vote handleClick={handleVote} />
      {anecdotes[selected]} 
    </div>
  )
}

export default App;
2

Shouldn’t your object keys be strings?

const [votes, setVotes] = useState({
    0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0
  });
1 Like
4

Are the votes for the anecdotes? If so, I would suggest you should co-locate them into an object.

const anecdotes = [
  { anecdote: "Something clever", votes: 0 },
  { anecdote: "Something even more clever", votes: 0 },
];
1 Like
5

I got it to work, but I’ll try to factor that in too. Thanks for the suggestion!
This is what I ended up with:

import { useState } from 'react'


const Button = (props) => (
  <>
    <button onClick={props.handleClick}>Random Anecdote</button>
  </>
);

const Vote = (props) => (
  <>
    <button onClick={props.handleClick}>Upvote!</button>
  </>
);

const App = () => {
  const [selected, setSelected] = useState(0);
  const [votes, setVotes] = useState({
    0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0
  });

  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.',
    'The only way to go fast, is to go well.'
  ]


  const handleClick = () => {
    const randNum = Math.floor(Math.random() * anecdotes.length);
    setSelected(randNum);
  }

  const handleVote = () => {
    setVotes(prev => ({
      ...prev,
      [selected]: votes[selected] + 1
    }))
  }
  
  return (
    <div>
      <Button handleClick={handleClick} />
      <p>{anecdotes[selected]}</p>
      <Vote handleClick={handleVote} />
      {' ' + votes[selected]}
    </div>
  )
}

export default App;
6

I believe they get converted into strings.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.