```js
function TableFooterPanel(props) {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const addNewCustomer = async (name, surname) => {
await service.addCustomer(name, surname);
props.funcParam();
}
return (
<>
<Card className='buttonFooter'>
<Form className='buttonFooter'>
<input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
<input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
<Button disabled={!(firstName.length < 3 || lastName.length < 3)} onClick={() => addNewCustomer(firstName, lastName)}>Add</Button>
</Form>
</Card>
</>
);
}
export default TableFooterPanel;
```
I suggest you to not write code directly in component's body: you don't know how many times that code will be exected. Much better use a `useEffect` hook:
function TableFooterPanel(props) {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const addNewCustomer = async (name, surname) => {
await service.addCustomer(name, surname);
props.funcParam();
}
useEffect(() => {
if (firstName.length <= 3 || lastName.length <= 3) {
setIsButtonDisabled(true);
}
else {
setIsButtonDisabled(false);
}
}, [firstName, lastName]);
return (
<>
<Card className='buttonFooter'>
<Form className='buttonFooter'>
<input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
<input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
<Button disabled={isButtonDisabled} onClick={() => addNewCustomer(firstName, lastName)}>Add</Button>
</Form>
</Card>
</>
);
}
export default TableFooterPanel;
As you can see, I have used an `useEffect` hook with `firstName` and `lastName` in deps list: this means that, every time `firstName` or `lastName` change, `useEffect` will be fired.
And don't forget that, to check string length you have to use `length` property =).
