Use below code it's working for me

https://codesandbox.io/s/weathered-water-jm1ydv?file=/src/App.js

DeckName()  {
    return (
      <div className="form-group mb-3">
        <input
          value={this?.state.deckName} /* ERROR HERE */
          onChange={this?.handleDeckNameChange}
          type="text"
          placeholder="Deck name"
          className="form-control"
          required
        />
      </div>
    );
  }

  DeckList() {
    let format =
      "EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3";
    return (
      <div className="form-group">
        <textarea
          value={this?.state.deckList}
          onChange={this?.handleDeckListChange}
          className="form-control"
          rows="15"
          required
        >
          {format}
        </textarea>
      </div>
    );
  }

You can use es6 function to return components which exist outside of parent rather than using method,change only this part of code:

1.instead of DeckName(){...}use DeckName =()=>{....} 2.instead of DeckList(){...}use DeckList =()=>{....}

Full modified code:

import React, { Component } from "react";
export class DeckForm extends Component {
  constructor(props) {
    super(props);
    this.state = { deckName: "", deckList: "" };
    // Bind our event handler methods to this class
    this.handleDeckNameChange = this.handleDeckNameChange.bind(this);
    this.handleDeckListChange = this.handleDeckListChange.bind(this);
    this.handleSubmission = this.handleSubmission.bind(this);
  }

  // Event handler method to update the state of the deckName each time a user types into the input form element
  handleDeckNameChange(event) {
    let typed = event.target.value;
    this.setState({ deckName: typed });
  }

  // Event handler method to update the state of the deckList each time a user types into the textarea from element]
  handleDeckListChange(event) {
    let typed = event.target.value;
    console.log(typed);
    this.setState({ deckList: typed });
  }

  // Event handler method to handle validation of deckName and deckList
  handleSubmission(event) {
    console.log(`${this.state.deckName}`);
    console.log(`${this.state.deckList}`);
  }

  render() {
    return (
      <form className="was-validated">
        <this.DeckName />
        <this.DeckList />
        <button type="submit" className="btn-lg btn-warning mt-3">
          Create
        </button>
      </form>
    );
  }

  DeckName = () => {
    return (
      <div className="form-group mb-3">
        <input
          value={this.state.deckName}
          onChange={this.handleDeckNameChange}
          type="text"
          placeholder="Deck name"
          className="form-control"
          required
        />
      </div>
    );
  };

  DeckList = () => {
    let format =
      "EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3";
    return (
      <div className="form-group">
        <textarea
          value={this.state.deckList}
          onChange={this.handleDeckListChange}
          className="form-control"
          rows="15"
          required
        >
          {format}
        </textarea>
      </div>
    );
  };
}

Live Demo: https://codesandbox.io/s/brave-hill-l0eknx?file=/src/DeckForm.js:0-2091

Another way to solve the issue is defining DeckName() method using arrow function. Here's a code snippet I tried with react 17.0.2 which worked perfectly fine for me.

It's always recommended to use arrow function to define methods in class based components, since arrow function inherit "this" from the block its called from, so you also don't have to do .bind(this) whenever you call methods.

JSX

import React, { Component } from 'react'
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            deckName: '',
            deckList: ''
        };
    }
    DeckName = () => {
        return (
            <div className='form-group mb-3'>
                <input
                    value={this.state.deckName} /* ERROR HERE */
                    onChange={this.handleDeckNameChange} 
                    type='text'
                    placeholder='Deck name'
                    className='form-control'
                    required
                />
            </div>
        );
    }
    render() {
        return (
            <form className='was-validated'>
                <this.DeckName />
                <button type='submit' className='btn-lg btn-warning mt-3'>Create</button>
            </form>
        );
    }
}
export default Test