React App crashes giving as useState input give an undefined error-CodePudding

I have create two states for my input elements and used onChange to manipulate their state. Why do I get this error even when I have declared the variables in a destructured array? Can someone explain to me what I am doing wrong please

import { React, useState } from 'react'

export const AddTransaction = () => {

  [transactionName, setTransactionName] = useState('');
  [amount, setAmount] = useState(0);

  return (
    <div>
        <h3>Add new transaction</h3>
        <form className="form">
            <div className="form-control">
            <label for="text">Transaction Name</label>
            <input 
              type="text" 
              className="text" 
              placeholder="Enter name of transaction" 
              value = {transactionName}
              onChange = {(e) => setTransactionName(e.target.value)}
            />
            </div>
            <div className="form-control">
            <label for="amount"> Amount </label>
            <input 
              type="number" 
              className="amount" 
              placeholder="Enter amount"
              value={amount}
              onChange = {(e) => setAmount(e.target.value)}
            />
            </div>
            <button className="btn">Add transaction</button>
        </form>
    </div>
  )
}

My app crashes with the below attached error -

Compiled with problems:X

ERROR


src\components\AddTransaction.js
  Line 5:4:    'transactionName' is not defined     no-undef
  Line 5:21:   'setTransactionName' is not defined  no-undef
  Line 6:4:    'amount' is not defined              no-undef
  Line 6:12:   'setAmount' is not defined           no-undef
  Line 18:24:  'transactionName' is not defined     no-undef
  Line 19:34:  'setTransactionName' is not defined  no-undef
  Line 28:22:  'amount' is not defined              no-undef
  Line 29:34:  'setAmount' is not defined           no-undef

Search for the keywords to learn more about each error.

CodePudding user response：

Variables transactionName, setTransactionName, amount and setAmount are not declared. You can either use const or let to declare them.

const [transactionName, setTransactionName] = useState('');
const [amount, setAmount] = useState(0);

Check: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

CodePudding user response：

you didn't declare your variables

change

[transactionName, setTransactionName] = useState('');
[amount, setAmount] = useState(0);

const [transactionName, setTransactionName] = useState('');
const [amount, setAmount] = useState(0);

CodePudding user response：

const [transactionName,setTransactionName] = useState('');

const [amount,setAmount] = useState(0);

You can declare many useStates as you want, but if you want a much more easy and a better handling process you can create an object like.

    const [formData,setFormData] = useState({
       transactionName:"",
       amount:0,
    });

and on input you can have a single onChange.

const onChange = (event) => {
//grab the name and value from event.target

    const {name,value} = event.target;
          setFormData(prevFormData => {
      return (
           ...prevFormData,
           [name]:value
      )
      })
    }