Something went wrong - Tutorial 5.3 Form

The tutorials are really good, clever way to get us to learn everything!
When I get to 5.3 Form
I modify web/src/pages/ContactPage.js here are my changes:

I see “Something went wrong” when I go to the contact page

Screenshot 2020-09-30 at 5.20.12 PM

Any info is appreciated. Thanks.

It would be helpful to post a picture of your console so that we can help you debug if you haven’t checked there already.

My guess with the information you have provided would potentially be that you are importing Form from the wrong location. But the image on right cuts off right near the import location

Ok cool, turns out I needed to search for Form, and I see this is how it is imported elsewhere
image

The tutorial says this:
image

I changed to import from ‘@redwoodjs/forms’ and now it is working. Thanks!

For anyone else looking, this is where the outdated imports are: https://dev.to/ajcwebdev/a-first-look-at-redwood-js-part-5-2ol4#53-raw-form-endraw-

@coding-to-music For the latest and most up-to-date tutorial, please check out the official one at https://redwoodjs.com/tutorial

Ok great - I was using this tutorial here:

The closest thing in the link you provided would be this:

I like the dev.to ajcwebdev stuff - hopefully it just needs a tweak to keep it updated, I would like to continue doing that whole series of tutorials. I can do the second one you mentioned too.
Thanks

I am still getting an error, but probably unrelated to this thread, here it is:

The error message is:
form cannot appear as a descendant of p

index.js:1 Warning: validateDOMNesting(…): cannot appear as a descendant of

.
in form (created by FormWithCoercionContext)
in FormWithCoercionContext (created by Form)
in CoercionContextProvider (created by Form)
in Form (created by ContactPage)
in p (created by BlogLayout)
in main (created by BlogLayout)
in BlogLayout (created by ContactPage)
in ContactPage (created by PageLoader)
in PageLoader (created by Loaders)
in Loaders (created by RouterImpl)
in RouterImpl (created by LocationProvider)
in LocationProvider (created by Context.Consumer)
in Location (created by Router)
in Router (created by Routes)
in Routes
in FlashProvider (created by RedwoodProvider)
in ApolloProvider (created by GraphQLProvider)
in GraphQLProvider (created by RedwoodProvider)
in RedwoodProvider
in FatalErrorBoundary

I see this thread in Stack Overflow

What does your code look like? Especially BlogLayout.js and ContactPage.js

This is BlogLayout.js

image
I can see the p wrapping the children, I have removed and now it works - thanks for pointing that out

Hey Tom, glad you’re enjoying the series and that you’re even using it to build out a project. I started the series back in June and then wrote it over the course of a few months and unfortunately there has been a little drift which you’re running into here. (It’s also worth pointing out that Redwood has an upgrade command to gracefully handle these things, the issue here is I literally was writing different parts with different versions because of the length of time it took to write which lead to some inconsistencies)

I’m working on doing a full refactor of the series right now with the current version for the whole series to smooth out these issues and will likely do another once we’re close to 1.0.

1 Like

Thank you I can appreciate the work that went into it - and also the challenge of keeping it up to date, as well as the opportunities and risks of same/different authors creating their own versions like I was thinking I could too, but really they all need to be kept up-to-date and synchronized lol what a challenge for a rapidly moving project. Different from writing a medium article who knows if anyone reads something you would post there and nobody would expect you to keep Medium articles up to date. Interesting set of challenges!

My learning style is to open a bunch of tabs about a topic and paste best ones into a google doc, organize it there, format the spacing and put a table of contents and then go thru and try to do it. I wouldn’t do a tutorial web page directly I always work from my google docs. So for example the new tutorial I would put that into my own system so I have a record of what I did and notes and screenshots - like a laboratory notebook. Anyway that’s what works for me…

One underappreciated thing for new people picking something up is just getting set up. From buying a $300 chromebook, setting up GitHub, SSH keys, vscode, bash_aliases, environment variables, git commands - all that is X pages of material but nobody can do anything until they get that set.

1 Like

And I can’t remember what I had for breakfast, everything needs to be written down lol

You might want to consider having Tutorials available on google docs and then the person makes their copy, goes thru and edits/updates annotates anything interesting or odd or make it their own, they have a record/resource for them to go back to. It’s another form of reusing the content but making it easier for people to more deeply ingest it and it’s just a doc happy they are into it…

I think GitHub already has all the collaborative tools you could ever need and the docs are all linked to the main github repo, I’m just going rogue by publishing on dev and will have to pay the price of maintaining it accordingly :sweat_smile:

1 Like

Many companies/firms/groups create some very good laptop setup scripts like:

Of course, this isn’t for a Chromebook, just OSX, but stands up a solid dev OSX machine really easily.

1 Like

To explain why, the p is a paragraph – of text – whereas div or form is more of a container.

Paragraphs can include what’s called phrasing content.

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Even though “normal” html will probably render a form in a p, structurally, it’s not 100% proper. Since React needs to understand the DOM, it follows that it tries to be a little strict in what it allows.

1 Like

I wonder moving forward for Cookbooks and other writings, authors should note what version of RedwoodJS is being used with a caveat that should used that version … or note that newer versions may have issues.

Generally, for “other writings”, I think that’s an excellent idea.

For cookbook recipes and other official docs I think the aim should always be to be up to date with the latest version of Redwood