I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended.
import { useState } from 'react';
import './App.css';
function App() {
const [income , setIncome] = useState(0)
const expense = 10
const balance = income - expense
const [firstValue , setFirstValue] = useState("")
const [secondValue , setSecondValue] = useState("")
const handleChange = event => {
setSecondValue(event.target.value)
}
const handleInputChange = event => {
setFirstValue(event.target.value)
}
function updateIncome(event) {
setIncome(event.target.value)
}
const createListItem = () => {
return(
<li>{firstValue}</li>
)
}
function checkMaxLength (object){
if (object.target.value.length > object.target.maxLength) {
object.target.value = object.target.value.slice(0, object.target.maxLength)
}
}
function buttonOnClick() {
createListItem()
}
return (
<div >
<header>
<div className='App'>
Expense Tracker
</div>
</header>
<main className='main'>
<div className='income-box'>
<div className='income'>Income
<div className='numbers'>
{income + "$"}
</div>
</div>
<div className='expense'>Expense
<div className='numbers'>
{expense + "$"}
</div>
</div>
</div>
<div className='income-input'>
<input type="number" min="0" maxLength = "8" onInput={checkMaxLength} className='input' placeholder='Enter your Income' onChange={updateIncome}/>
</div>
<div className='total-balance'>
Total Balance : {balance}$
</div>
**<div className='add-item'>Item
<input type="text" className='adding-input' placeholder='Add Item' onChange={handleInputChange}/>
</div>
<div className='add-item'>Amount
<input type="number" className='adding-input' placeholder='Add Amount' onChange={handleChange}/>
</div>
<div className='add-button'>
<button type="button" className='expense-button' onClick={buttonOnClick}>Add Expense</button>
</div>**
<div>
<ul>
{createListItem}
</ul>
</div>
</main>
</div>
);
}
export default App;