At this point, we've got the project page in our next app working for an existing project. Right? The Toast Maker works great. However, let's see what happens if we start to create a brand new project.
Under the Projects folder, I'll click the Create New button and create a new project story. To stick with the cooking theme that I kind of just stumbled upon in the last lesson, let's call this project Food Picker Upper Sticks. And yes, that's my silly way of saying chopsticks. Alright, now I'll hit create, and this time we get a 500 error when we start to edit the page.
The error that we're getting is cannot read properties of undefined reading file name. image exists, and then trying to access the file name property on it. image is undefined and thus we cannot access a file name property. All right, in order to fix this issue we can use what's known as optional chaining.
That's as simple as adding a question mark before the dot on the variable that may or may not exist. image. image over in the alt attribute. Great, let's give that a save.
and see what it looks like over in the browser now. Refresh the page, and yeah, now the error is gone. But we're still presented with kind of a disorienting experience, right? Literally all that's on the page is the hard-coded go back here.
Now if I were to start typing in a name, it would in fact appear in the preview, and that's just fine. However, this kind of experience really isn't great. So let's show some fallback content for brand new projects. view for the name of the project, we'll just say if the name doesn't exist, then we'll display new project.
Also, if the image doesn't exist, we'll display a placeholder image. And then finally, if the description doesn't exist, I'll just display some lorem ipsum text. Great. Back over in the browser now, things are looking a lot nicer.
This is definitely more approachable to someone editing and creating new content. Of course, this is really just boilerplate stuff, so we should fill it out with the actual project information. So the name once again is FoodBakerUpperSticks. I'll add an image.
And once again, I just so happen to have downloaded an appropriate image of Chopsticks here. So we'll add that on. And then for my description, let's just say something silly like, why use a fork when you could use sticks? And sure enough, everything fills out with the real content as soon as that content is provided over in the site preview.
All right, and that wraps up this lesson. In the next, we'll get the feature projects showing on the homepage. At this point, we've got the project page in our next app working for an existing project. Right?
The Toast Maker works great. However, let's see what happens if we start to create a brand new project. Under the Projects folder, I'll click the Create New button and create a new project story. To stick with the cooking theme that I kind of just stumbled upon in the last lesson, let's call this project Food Picker Upper Sticks.
And yes, that's my silly way of saying chopsticks. Alright, now I'll hit create, and this time we get a 500 error when we start to edit the page. The error that we're getting is cannot read properties of undefined reading file name. image exists, and then trying to access the file name property on it.
image is undefined and thus we cannot access a file name property. All right, in order to fix this issue we can use what's known as optional chaining. That's as simple as adding a question mark before the dot on the variable that may or may not exist. image.
image over in the alt attribute. Great, let's give that a save. and see what it looks like over in the browser now. Refresh the page, and yeah, now the error is gone.
But we're still presented with kind of a disorienting experience, right? Literally all that's on the page is the hard-coded go back here. Now if I were to start typing in a name, it would in fact appear in the preview, and that's just fine. However, this kind of experience really isn't great.
So let's show some fallback content for brand new projects. view for the name of the project, we'll just say if the name doesn't exist, then we'll display new project. Also, if the image doesn't exist, we'll display a placeholder image. And then finally, if the description doesn't exist, I'll just display some lorem ipsum text.
Great. Back over in the browser now, things are looking a lot nicer. This is definitely more approachable to someone editing and creating new content. Of course, this is really just boilerplate stuff, so we should fill it out with the actual project information.
So the name once again is FoodBakerUpperSticks. I'll add an image. And once again, I just so happen to have downloaded an appropriate image of Chopsticks here. So we'll add that on.
And then for my description, let's just say something silly like, why use a fork when you could use sticks? And sure enough, everything fills out with the real content as soon as that content is provided over in the site preview. All right, and that wraps up this lesson. In the next, we'll get the feature projects showing on the homepage.