score:2
Accepted answer
you need to assert that e.target.name
, which is always just string
, is in fact a valid key of inputs.field
.
const eventname = e.target.name as keyof paymentform['field'];
however your update syntax is not right. you are setting top-level properties of inputs and you are using the value of inputs.field[eventname]
as the property name.
you could do a nested update:
setinputs(inputs => ({
...inputs,
field: {
...inputs.field,
[eventname]: eventvalue
}
}));
but why do we need to have this field
property at all? it's the only property in inputs
so why don't we just make it be the entire state.
interface fields {
paymentmethod: string;
amount: string;
receiptcode: string;
paymentdate: string;
paymentsourceid: string;
}
const paymentform = () => {
const [fields, setfields] = usestate<fields>({
paymentmethod: "",
amount: "",
receiptcode: "",
paymentdate: "",
paymentsourceid: "paymentsourceid"
});
const changedhandler = (
e: react.changeevent<htmlinputelement | htmlselectelement>
) => {
setfields((fields) => ({
...fields,
[e.target.name as keyof fields]: e.target.value
}));
};
return <></>;
};
score:1
your eventname can be a union of the field keys. try this.
type eventname = 'paymentmethod' | 'amount' | 'recieptcode' ...etc;
const eventname = e.target.name as eventname; // or
const eventname = e.target.name as keyof paymentform['field'];
Source: stackoverflow.com
Related Query
- how fix Element implicitly has an 'any' type because expression of type 'string' can't be used to index type?
- react typescript error - element implicitly has an any type because expression of type string cant be used to index type {}
- How do I fix the error "Element implicitly has an 'any' type because the expression of type
- TS | Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<SecurityMode, boolean>'
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React Typescript
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{...}'
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Breakpoints'
- Global window object: Element implicitly has an 'any' type because index expression is not of type 'number'.ts
- TypeScript - Element implicitly has an 'any' type because expression of type '"storyFile"' can't be used to index type '{}'
- Typescript with React > Element implicitly has an 'any' type because expression of type 'string' can't be used to index
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Item'
- Nested Object -> Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{}' - React Anagram
- Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type
- error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index 'ModuleType'
- Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'Number'
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'
- Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 1: Element; 2: Element; 3: Element; }'. TS7053
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type with createStyles
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BGColors'
- Typescript error in map(): Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
- How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?
- error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist
- How to fix Element type is invalid: expected a string (for built-in components)?
- How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
- TypeScript Err: "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
More Query from same tag
- Saving multipe arrays in React state that come from an API
- React useState didn't catch previous state
- Differentiating between kyeboard and mouse events during onFocus in React
- react-transition-group CSSTransition, conditional with null
- How to pass props as object
- React Hooks: paradigm transition problem from sync to async
- I can't pass parameters to external function to render the message, TypeError: Class constructor AlertMessage cannot be invoked without 'new'
- Pass a variable to a static google image map
- Event propagation and multiple state change in react select dropdown
- Prettier is not formatting code at all in vscode
- Selected value of dropdown persists even after reloading options
- When to use private/protected methods in Typescript with React
- TypeError: event.preventDefault is not a function on React Hook Form using Formcarry
- How can i split a column of list in different rows in bootstrap
- Export .scss to build folder?
- ReactJS component not re-rending after setState update?
- How do I make windows event listener trigger once per keypress?
- React Gatsbyjs - Passing props with styled components
- React: Bug when moving a pressed mouse above a 2D grid
- How to catch undeclared variable in React with ESLint?
- Props not being passed through Route element with React Router v6
- React Spring useTransition not working as expected
- Setting and resetting states in React.js
- ReactJS: Can not type into input field
- React-leaflet custom component - context not being passed?
- Saga not running when action creator being called inside componentDidMount
- Understanding React Higher-Order Components
- How to trigger an event after any (re)render of a React/Redux app
- Implementation details of setStateVariable function in useState hook
- How to stop random links from opening with react-router?