Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) React Component Patterns Destructuring Props

Posted by Tom Stanley
Tom Stanley
15,308 Points

How would you destructure props in AddPlayerForm.js?

If I try to destructure this.props.addPlayer in the render method of AddPlayerForm, I get this error: 

./src/components/AddPlayerForm.js
  Line 16:  'addPlayer' is not defined  no-undef

Is there a way around this, or can't you destructure this function from props in this case?

import React, { Component } from "react";

class AddPlayerForm extends Component {


  state = {
    value: ""
  };

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

  handleSubmit = (e) => {
    e.preventDefault();
    addPlayer(this.state.value); // addPlayer this isn't defined yet
    this.setState({
      value: ""
    })
  }

  render() {

    const { addPlayer } = this.props;

    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;
Mike Hatch
Mike Hatch
14,940 Points

Good question. I'm currently under the belief that you can't. There are no props to destructure here. There's only state.

3 Answers

Antoine Venco
Antoine Venco
4,787 Points
Antoine Venco
Antoine Venco
4,787 Points

You need to declare the variable inside of your function in order for it to access the value, not sure if this is correct but it's working :

handleSubmit = (e) => {
    const { addPlayer } = this.props;
    e.preventDefault();
    addPlayer(this.state.value); // addPlayer this isn't defined yet
    this.setState({
      value: ""
    })
  }
Mike Hatch
Mike Hatch
14,940 Points

Hi Antoine,

It may work, but is that actually considered "Destructuring"? It doesn't seem to take away anything, it only adds. Also, addPlayer has already been declared in App.js. Take a look at the very bottom of the file:

<AddPlayerForm addPlayer={this.handleAddPlayer} />

As I understand it, addPlayer is a prop and is assigned the function handleAddPlayer. (Just a fellow student still learning, so I'm not positive I used correct terminology or not.)

Charlie Prator
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points
Charlie Prator
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points

What about writing the destructured variable assignment from within the handleSubmit() method?

import React, { Component } from 'react';

class AddPlayerForm extends Component {

  // const { addPlayer } = this.props;

  state = {
    value: ''
  };

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

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

  render() {

  // Where I originally put the destructure variable assignment

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

export default AddPlayerForm;
Nick Huemmer
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points

Thanks - I implemented this solution and it worked!

Joe Mottershaw
Joe Mottershaw
5,866 Points
Joe Mottershaw
Joe Mottershaw
5,866 Points

I agree with Mike Hatch, I think that's why Guil said he's going to stop there cause there isn't actually any gain from doing it in the AddPlayerForm component as the render method references state (which you don't destructure afaik) or it's own methods (handleSubmit and handleValueChange). The only place this.props is used is in the handleSubmit method and since you're only referencing a single prop, adding a whole line for destructuring props isn't really required, if there were more props used I could see the benefit, same goes within the render method.

I guess it also depends on what you (and/or your team) decide on in terms of being consistent, you might decide that even if just one prop is used/available, you destructure regardless. One it might increase the readability of the codebase and second if it's expanded upon at a later date the process has already been started. I'd say just be consistent in whatever choice you make.