Change the input text file in react - reactjs

Question

New to React and using a simple table. I'm just testing to change an input text value when I select a button on the same row.
The code below is where I'm stuck. I'm trying to figure out how to change the state value "users" for this row when I click on the button. I'm trying to set the first_name to "Testing".
const [users, setUsers] = React.useState(null);
let usersList =
businessUsersState.data.length > 0 &&
businessUsersState.data.map((item: any, key: number) => {
return (
<tr key={key} data-account={item.account_id}>
<td>
<Form.Control name="first-name" type="input" placeholder="First Name" defaultValue={item.first_name} />
</td>
<td>
<Button variant="primary" type="button" onClick={() => {
debugger;
const row = businessUsersState.data.map((item: any) => ({...item}));
row[key].first_name = 'Testing';
const row1 = usersList[key];
//setUserRow(row);
//setUsers(row);
}}>
</Button>
</td>
</tr>
);
});
setUsers(usersList);
I was reading the following link but I cant seem to get it to work. Any help is appreciated.

Answer 1

Following React docs example of object and array in state
const uniqueId = () => {
// always start with a letter (for DOM friendliness)
let idstr = String.fromCharCode(Math.floor(Math.random() * 25 + 65));
do {
const ascicodeChar = Math.floor(Math.random() * 25 + 65);
idstr += String.fromCharCode(ascicodeChar);
idstr += Math.floor(Math.random() * 99);
} while (idstr.length < 8);
return idstr.toLowerCase();
};
const fakeData = [
{ id: uniqueId(), company: 'abc', contact: 'a#gmail.com', country: 'China' },
{ id: uniqueId(), company: 'def', contact: 'b#gmail.com', country: 'Japan' },
{
id: uniqueId(),
company: 'ghj',
contact: 'c#gmail.com',
country: 'Singapore',
},
{
id: uniqueId(),
company: 'ikl',
contact: 'd#gmail.com',
country: 'Indonesia',
},
{
id: uniqueId(),
company: 'mno',
contact: 'e#gmail.com',
country: 'Thailand',
},
];
export default function App() {
const [data, setData] = React.useState(fakeData);
const handleEdit = (id) => {
setData(
data.map((t) => {
// find item matched given id and mutate that item
if (t.id === id) {
return {
id,
company: `test${id}`,
contact: `test${id}#gmail.com`,
country: `test${id}`,
};
} else {
return t;
}
})
);
};
return (
<div>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>edit</th>
</tr>
{(() => {
if (!data.length) {
return <p>No data available</p>;
}
return data.map((i, index) => {
return (
<tr key={i.id}>
<td>{i.company}</td>
<td>{i.contact}</td>
<td>{i.country}</td>
<td>
{/* pass an id of row to edit fnc */}
<button onClick={() => handleEdit(i.id)}>edit</button>
</td>
</tr>
);
});
})()}
</table>
</div>
);
}
You could try to do the same above example.