How would you restructure state for AddPlayerForm.js?

Question

Since state is an object, I figured you could also destructure that as well with const {value} = this.state;. Where's the best place to place that line to only have to place it once so that there's no repetitive code?

Things I have tried: When I try to restructure it above the handleValueChange method, it gives me an error and says there's an unexpected token. When I leave it inside of the handleSubmit method, it compiles as it's accessed there but at the same time, it needs to be accessed by the render method and shows up as an error in the browser. Placing it inside the render - and only the render - method gives me a VALUE IS UNDEFINED error. Declaring the aforementioned destructured state twice - once in handleSubmit and again in the render function makes the code compilable but this also feels like it defeats the purpose.

This is my AddPlayerForm.js

import React, { Component } from "react";

class AddPlayerForm extends Component {

 /* This is where state originally is:

 state = {
    value: ''
 } 

 */

   handleValueChange = (e) => {
      this.setState({ value: e.target.value });
   }

   handleSubmit = (e) => {
      const {addPlayer} = this.props;
      const {value} = this.state;
      e.preventDefault();
      addPlayer(value);
      this.setState({
         value: ''
      });
   }
   render() {

      return (
         <form
            onSubmit={this.handleSubmit}>
            <input
               type="text" placeholder="Enter a player's name"
               value={this.state.value}
               onChange={this.handleValueChange}
               />
            <input
               type="submit"
               value="Add Player"
            />
         </form>
      )
   }
}

export default AddPlayerForm;

Welcome to the Treehouse Community

Looking to learn something new?

Sarai Vasquez Mariñez

Sarai Vasquez Mariñez

How would you restructure state for AddPlayerForm.js?