Is this code bad practice for resetting state in React?

Question

I have a votes state that's applied to 4 different objects, but my question is if the reset method is correct or if I should refractor my initialState object so I do not need to repeat myself in the reset method. The incrementor for each object and the reset button works when called.

class Functions extends React.Component {

static initialState = {
    waves : [
        {id: 'Pipeline', votes: 0},
        {id: 'Backdoor', votes: 0},
        {id: 'Froggies', votes: 0},
        {id: 'Waimea', votes: 0}
    ]
}

constructor(props){
    super(props);
    this.state = Functions.initialState;  
}


reset(e) {
    if (e) e.preventDefault();
    
       this.setState({
        waves : [
            {id: 'Pipeline', votes: 0},
            {id: 'Backdoor', votes: 0},
            {id: 'Froggies', votes: 0},
            {id: 'Waimea', votes: 0}
        ]
    });
    
    

}

add (i) {
        let oldWaves = [...this.state.waves]
        oldWaves[i].votes++
        this.setState({waves: oldWaves})
    }   

render() {
return (
    <div className='waves'>
        <h1>Vote for your favorite wave!</h1>
        {this.state.waves.map((wave, i) => 
            <div key={i} className='wave'>
                <div className='voteCount'>
                    {wave.votes}
                </div>
                <div className='waveDetails'>
                    {wave.id}
                    <button onClick={this.add.bind(this, i)}>X</button> 
                </div>
                
            </div>
        )}
        <button onClick={this.reset.bind(this)} className='resetButton'>Reset  </button> 
    </div>
)
}

}

sooo many answers to this question. Search works. Does this answer your question? [Which of these strategies is the best way to reset a component's state when the props change](https://stackoverflow.com/questions/59417572/which-of-these-strategies-is-the-best-way-to-reset-a-components-state-when-the) — Randy Casburn, Oct 25 '20 at 18:26

score 3 · Accepted Answer · answered Oct 25 '20 at 18:28

There's no need to repeat the same state object again. Like you thought, it'd make more sense to reference the prior object instead.

reset(e) {
  if (e) e.preventDefault();
  this.setState(Functions.initialState);
}

But you also have a bug with the add method - you're mutating the existing state object, which should absolutely never be done in React. Fix it with:

add (i) {
  const oldWaves = [...this.state.waves];
  const wave = oldWaves[i];
  oldWaves[i] = { ...wave, votes: wave.votes + 1 };
  this.setState({waves: oldWaves})
}

or

add (i) {
  const { waves } = this.state;
  const newWaves = [
    ...waves.slice(0, i),
    { ...waves[i], votes: waves[i].votes + 1 },
    ...waves.slice(i + 1)
  ];
  this.setState({ waves: newWaves });
}

@IamToobDude Also initialState should preferably be getInitialState factory function instead. Not a good idea to mutate a state for all components at once, accidentally or not. — Estus Flask, Oct 25 '20 at 23:44

score 0 · Answer 2 · answered Oct 25 '20 at 18:29

0

You could indeed use the initialState to avoid repeating code.

reset(e) {
    if (e) {
        e.preventDefault();
    }

    this.setState(this.initialState);
}

answered Oct 25 '20 at 18:29

emeraldsanto

4,330
1
12
25

Is this code bad practice for resetting state in React?

2 Answers2