I am currently working on dynamically generating a form based on an array of objects.
The objective is to allow users to create accounts dynamically by clicking the Add User button and then submit the complete state object of users to the backend.
Encountering this particular error 'Element implicitly has an 'any' type because type '{ name: string; age: string; }' has no index signature'.
I have limited experience with React! Any assistance would be greatly appreciated.
Could you help me identify what I might be doing incorrectly?
import * as React from "react";
interface State{
users:User[]
}
interface Props{
}
interface User{
name:string,
age:number;
}
class App extends React.Component<Props,State> {
state = {
users: [{name:"", age:""}],
}
handleChange = (value:number,event : React.ChangeEvent<HTMLInputElement>) => {
let users = [...this.state.users];
console.log(event.target.value);
users[value][event.target.name] = event.target.value;
this.setState({ users }, () => console.log(this.state.users))
}
addUser = () => {
this.setState((prevState) => ({
users: [...prevState.users, {name:"", age:""}],
}));
}
handleSubmit = (e:any) => {
e.preventDefault();
console.log(this.state.users)
}
render() {
let { users} = this.state
return (
<form onSubmit={this.handleSubmit} >
<button onClick={this.addUser}>Add new cat</button>
{
users.map((val, id)=> {
return (
<div key={id}>
<input
type="text"
name="name"
value={users[id].name}
onChange = {(e) =>this.handleChange(id,e)}
/>
<input
type="text"
name="age"
value={users[id].age}
onChange = {(e) => this.handleChange(id,e)}
/>
</div>
)
})
}
<input type="submit" value="Submit" />
</form>
)
}
}
export default App;