Error in App.js when trying to launch local React testing when switching to using hooks-CodePudding

I'm working on a project for my internet programming class and I'm not quite sure where I made my mistake here. I had this project at least running and able to test locally up until last night when I switched to using hooks (or trying to anyway). When I run npm start this is what logs into the console on Firefox.

Uncaught TypeError: this is undefined
    App App.js:67
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 24
App.js:67
    App App.js:67
    React 11
    performConcurrentWorkOnRoot self-hosted:1406
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 24

I had not changed any of my import statements, I had only added useState. VSCode shows me no errors in my code, so I believe something is out of place, but that's why I'm here to ask.

//import logo from './logo.svg';
import './App.css';
import './form.css';
import React, { useState } from 'react';













function App(){


  const [showText, setShowText] = useState(0);

  const radioHandler = (showText) => {
    setShowText(showText);
  };

  




  // constructor = (props) => {
  //   super(props);
  //   this.state = {
  //     status: 0
  //   };
  //   handleInputChange = handleInputChange.bind(this);
  //   handleSubmit = handleSubmit.bind(this);
  // }

  const handleInputChange = (event, value) => {
    console.log(value);
  }

  const handleSubmit = (event) => {
    event.preventDefault();
  }










  return (
    <div className="form_css">
      <form onSubmit={handleSubmit}>
        <div className="general_info_container">
          <div className="name_container">
            <label className="f_name">First Name:</label>
            <input
              name="f_name"
              type="text"
              value={this.state.f_name}
              onChange={handleInputChange}
              placeholder="Please enter your first name"
            />

            <label className="m_name">Middle Initial:</label>
            <input
              name="m_name"
              type="text"
              value={this.state.m_name}
              onChange={handleInputChange}
              placeholder="Please enter your middle initial"
            />

            <label className="l_name">Last Name:</label>
            <input
              name="l_name"
              type="text"
              value={this.state.l_name}
              onChange={handleInputChange}
              placeholder="Please enter your last name"
            />
          </div>

          <div className="address_container">
            <label>Street:</label>
            <input
              className="street"
              type="text"
              value={this.state.street}
              onChange={handleInputChange}
              placeholder="123 Main Street"
            />

            <label>City:</label>
            <input
              className="city"
              type="text"
              value={this.state.city}
              onChange={handleInputChange}
              placeholder="City Name"
            />

            <label>State:</label>
            <input
              className="state"
              type="text"
              value={this.state.state}
              onChange={handleInputChange}
              placeholder="New York"
            />

            <label>Zip Code:</label>
            <input
              className="zip_code"
              type="number"
              value={this.state.zip_code}
              onChange={handleInputChange}
              placeholder="12345"
            />
          </div>

          <div>
            <label>
              Have you exercised regularly within the past six (6) months?
            </label>
            <input
              className="exr_yes"
              type="radio"
              value="true"
              onChange={handleInputChange}
            />
            <input
              className="exr_no"
              type="radio"
              value="false"
              onChange={handleInputChange}
            />

            <br></br>

            {/* Testing radio button hide/show */}
            <label>Do you have any chonic medical conditions? TEST TEST TEST TEST TEST TEST</label>
            <input
              className="chronic_yes"
              type="radio"
              value="true"
              checked={showText === 1}
              onClick={(e) => radioHandler(1)}
            />
            <input
              className="chronic_no"
              type="radio"
              value="false"
              checked={showText === 2}
              onClick={(e) => radioHandler(2)}
            />
            {showText === 1 && 
              <div>
                <p>Test showing</p>
              </div>}
              {showText === 2 & <p></p>}
            
            

















            <div>
              <label>Please enter any chronic conditions you have below:</label>
              <input
                className="chronic_medical"
                type="text"
                value={this.state.chronic_show}
                onChange={handleInputChange}
              />
            </div>
            {/* Testing radio button hide/show

            {/* Testing radio button hide/show */}
            <label>Are you currently taking any medication?</label>
            <input
              className="meds_yes"
              type="radio"
              value="chronic"
              onClick={(e) => radioHandler(1)}
            />
            <input
              className="meds_no"
              type="radio"
              value="chronic"
              onClick={(e) => radioHandler(2)}
            />

            <div id="meds_show">
              <label>Please list any medications you take below:</label>
              <input
                className="meds_show"
                type="text"
                value={this.state.meds_show}
                onChange={handleInputChange}
              />
            </div>
            {/* Testing radio button hide/show */}

            {/* Testing radio button hide/show */}
            <label>Do you, or have you had, any injuries?</label>
            <input
              className="injury_yes"
              type="radio"
              value="ture"
              onChange={handleInputChange}
            />
            <input
              className="injnury_no"
              type="radio"
              value="false"
              onChange={handleInputChange}
            />

            <div id="injury_show">
              <label>
                Please enter any injuries you have had in the past below:
              </label>
              <input
                className="injury_show"
                type="text"
                value={this.state.injury_show}
                onChange={handleInputChange}
              />
            </div>
            {/* Testing radio button hide/show */}

            <label>
              Has a doctor ever suggested you only participate in medically
              supervised exercise?
            </label>
            <input
              className="supexr_yes"
              type="radio"
              value={this.state.supexr_yes}
              onChange={handleInputChange}
            />
            <input
              className="supexr_no"
              type="radio"
              value={this.state.supexr_no}
              onChange={handleInputChange}
            />
          </div>
        </div>
      </form>
    </div>
  );
}








export default App;

And please, if you have any tips for a beginner they would be much appreciated!

CodePudding user response：

You use this.state in your input field value but you are using hooks. You can create all your state variable using useState. Like the below:

const [inputValue, setInputValue] = useState({
    f_name: '',
    m_name: '',
    ...

})

return (
    <div>
      ...
      <input
          name="f_name"
          type="text"
          value={inputValue.f_name}
          onChange={handleInputChange}
          placeholder="Please enter your first name"
      />
    </div>
)

CodePudding user response：

The error is telling you exactly what is going wrong: this is being referenced and is undefined. I can see you've commented out some lines, which looks as though you've moved away from using Class components to Functional components. Class components would understand this, but as you're now using a Functional component constructs like this.state.f_name are meaningless.

I don't want to re-write your code, but just want to point out that you probably want to do something like:

  const [firstName, setFirstName] = useState("");
....
const handleInputChange = (event, value) => {
    if(event.target.name == 'f_name'){
         setFirstName(value);
    }
    console.log(value);
  }
...
            <input
              name="f_name"
              type="text"
              value={firstName}
              onChange={handleInputChange}
              placeholder="Please enter your first name"
            />

You need to do something similar for all other input fields, and then tidy up the code.

I suggest you always start with something small (remove all other fields and just get one field working). https://reactjs.org/docs/getting-started.html is an external starting place to get a better understanding of React. Happy coding.