knbibin
knbibin

Reputation: 1211

Unexpected token error in reactjs app

I'm using react-jsonschema-form to display and validiate form and while creating custom validation found in the Unexpected tocken error in the line which is having "..." syntax. Please find the below code

import React, { Component } from "react";
import { render } from "react-dom";

import Form from "react-jsonschema-form";

const SchemaForm = JSONSchemaForm.default;

let schema = {
 type: "string",
title: "FirstName",
minLength: 12,
required: true,
messages: {
required: "Please enter your First name",
minLength: "First name should be > 5 characters"
}
 };

  const MySchemaForm = props => {

  const transformErrors = errors => {
  return errors.map(error => {

  if (error.schema.messages && error.schema.messages[error.name]) {
    return {
      ...error,
      message: error.schema.messages[error.name]
    };
  }
  return error;
 });
 };

 return (
<SchemaForm
  { ...props }
  schema={schema}
  liveValidate
  showErrorList={false}
  transformErrors={transformErrors}
 / >
);
 };

class App extends React.Component {
 constructor(props) {
super(props);
this.state = {formData: {}};
 }
 onSubmit({formData}) {
this.setState({formData});
}
 render() {
  return (
  <div>
    <MySchemaForm formData=""/>
  </div>
);
}
}

React.render(<App />, 
         document.getElementById("app"));

Im getting the error at the line where "...error". Can anyone help me to resolve this issue.

Upvotes: 0

Views: 163

Answers (1)

Jayce444
Jayce444

Reputation: 9063

You need to use a plugin if you're going to use the ... rest/spread operator. Here's the babel plugin:

https://babeljs.io/docs/plugins/transform-object-rest-spread/

Upvotes: 1

Related Questions