I try collect data from Form to allData as a component state , but get an error "Expression expected"
TS1109: Expression expected. 121 | 122 | this.setState((prevState) => ({> 123 | allTasks: [prevState.data, ...prevState.allData?], | ^ 124 | data: {} 125 | })); 126 |
I add interfaces.allData is an array of data.Any ideas ? How I undestand, its about type of allData, but it seams to right
interface FormInputState { errors?: FormErrors; data?: FormData; allData?: Array<FormData>;}interface FormData { name?: string; email?: string; birthday?: string; genre?: string; getRecommendations?: boolean; notifications?: boolean; image?: string; id?: number;}
Component looks like this
export default class Form extends React.Component<FormInputProps, FormInputState> { private form: React.RefObject<HTMLFormElement>; private nameInput: React.RefObject<HTMLInputElement>; private emailInput: React.RefObject<HTMLInputElement>; private birthdayInput: React.RefObject<HTMLInputElement>; private genreInput: React.RefObject<HTMLSelectElement>; private getRecommendations: React.RefObject<HTMLInputElement>; private notificationsInput: React.RefObject<HTMLInputElement>; private imageInput: React.RefObject<HTMLInputElement>; constructor(props: FormInputProps) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.form = React.createRef(); this.nameInput = React.createRef(); this.emailInput = React.createRef(); this.birthdayInput = React.createRef(); this.genreInput = React.createRef(); this.getRecommendations = React.createRef(); this.notificationsInput = React.createRef(); this.imageInput = React.createRef(); this.state = { errors: {}, data: {}, allData: [], }; } handleSubmit(event: React.SyntheticEvent<HTMLFormElement>) { event.preventDefault(); if (this.validate().isValid) { const formData: FormData = { name: this.nameInput.current?.value, email: this.emailInput.current?.value, birthday: this.birthdayInput.current?.value, genre: this.genreInput.current?.value, getRecommendations: this.getRecommendations.current?.checked, notifications: this.notificationsInput.current?.checked, image: this.imageInput.current?.files?.[0]?.name, id: new Date().getTime(), }; this.setState({ data: formData, }); this.setState((prevState) => ({ allTasks: [prevState.data, ...prevState.allData?], data: {} })); this.form.current?.reset(); this.setState({ errors: {}, }); } else { this.setState({ errors: this.validate().errors, }); this.form.current?.reset(); } }
Any ideas ? How I undestand, its about type of allData, but it seams to right