Cannot have "Date" as the name of a column

Hello world. We have a column named “Lesson Date” in our data. When React Studio builds the project it created the below code snippet.
row = { …row,
Lesson Date: this.state.date,
Lesson Notes: this.state.notesField,
Lesson Summary: this.state.lessonSummaryField,
Coach: this.state.coachField,
Lesson Name: this.state.lessonNameField,
};
Since Lesson Date is not quoted, JS thinks “Date” is a keywork and throws this error:
DataSheet_notes.js:6 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jeff/Documents/React Studio/Works In Progress/Coaches Corner - Coach Corner/src/EditLessonScreen.js: Unexpected token, expected “,” (84:13)
82 | };
83 | row = { …row,

84 | Lesson Date: this.state.date,
| ^
85 | Lesson Notes: this.state.notesField,
86 | Lesson Summary: this.state.lessonSummaryField,
87 | Coach: this.state.coachField,

We’re having a similar issue with the word “Summary” for another column. This only came up when we started using the Send/Save data functionality.

To work around it, we renamed the columns to take out the spaces. Now React Study retains the old names and the new ones:
row = { …row,
Fencer: this.props.dataSheetRow.Fencer,
Coach: this.state.coachField,
Lesson Summary: this.props.dataSheetRow.Lesson Summary,
Lesson Name: this.state.lessonNameField,
LessonSummary: this.state.lessonSummaryField,
Lesson Date: this.state.date,
LessonNotes: this.state.notesField,
LessonDate: this.state.date,
Lesson Notes: this.state.notesField,
Lesson_Date: this.state.date,
LessonName: this.state.lessonNameField,
};

Hi, great that you worked it out. One should never use spaces and special characters in variable names in programming. Here’s some good ideas for naming conventions in JS: https://www.w3schools.com/js/js_conventions.asp

It didn’t really work, which is why I posted again, two messages above. We did go through and change the names, but React Studio still retains the old, two-word names in the code, which we can’t remove. It’s still not working.

You need to reload the data to Data sheet and make sure that none of the documents loaded from Database does not contain fields with unsupported field names. This way the Studio should rebuild the Data sheet columns into the code.

I’m afraid that’s what we did, and still got that error.

Did the Data sheet’s contain columns with the unsupported names when you reloaded the data? If yes then the problem is in that there are still documents in Database containing the wrong kind of field names.

If not then try to delete the Save interaction and rebuild it, hopefully that deletes the references to “old fields”.

Confirmed. Deleting that button did clear out the old references.

1 Like

Great, we’ll add some housekeeping to the Save data interaction’s code generation to prevent this in the future versions.

Thanks for the bug report!

Sure thing. I’m told that since Firebase allows spaces in the field names, not permitting spaces in your fields would help address that problem. Speaking of which, Firebase also allows for timestamps/dates, but the format it uses isn’t directly compatible with the data from that your Date Picker component. My friend wrote some script to convert between the two, which we’ve had to enter into every place where the two interact. Your application doesn’t depend on Firebase 100%, but this would be a helpful change for the projects that do use it.

Firebase is just one backend of the many that users can use so we cannot make elements to support everything in “firebase style”. My current opinion is that the best practise to store the dates in any Database is by using Unix time. It’s then simple to convert that time to any format with a script.

What we try to do is to have as generic solution as possible. The downsize is then it requires some code debugging skills. Most app builders try to tackle problems with building their own frameworks which makes it easier to them to control what users can do and prevent doing things that will break the code. This however forces the user to proprietary framework and it is not possible to “eject” the code at any time. Our unique strength is the we generate real code which anyone can read and edit. We can also add new code export targets quite easily for paid projects.

BTW. did you know that you can save script into template and access it easily in any place on your project? Just click “User snippets” in Script editor and save the script there. You can then copy the script easily by clicking the “+ Add snippet” button in other places.