Jamming: Why use defaultValue for the input?

Why use defaultValue for the input for the playlist name?

In the instructions, Jamming has us use defaultValue='New Playlist' instead of value={this.props.playlistName}. This creates an input whose displayed doesn’t update with the state (example: resetting everything after save). Even with defaultValue={this.props.playlistName}, updating the playlist name through state doesn’t affect the displayed text.

Even in the walkthrough video, it doesn’t change when you reset the state.

Using value instead saves the correct name and allows the displayed text to be changed through manipulating the state, so I’m wondering if there’s any reason not to just change it.

<div className="Playlist">
        <input 
          value={this.props.playlistName}
          onChange={this.handleNameChange} />

I checked my code and I had ended up using value too. Didn’t have a defaultValue set. I assume I did it this way for the same reasons you’ve observed.

In my App component, I have the playlist name in the state with an initial value of ‘New Playlist’, and in the savePlaylist() method, I change it to ‘New Playlist’ while clearing the playlist array after a successful save too. There doesn’t ever need to be a defaultValue doing this.

1 Like

Yeah, I did the same thing. It’s what works.

1 Like