React App crashes giving as useState input give an undefined error

Question

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.

Answer 1

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

Answer 2

you didn't declare your variables

change

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

to

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

Answer 3

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
      )
      })
    }