Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

I get the error "Expression expected" when trying to use setState with prevState in React/TypeScript app

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>