React: fix misleading content about propTypes warnings

[hebiscus]

Describe your suggestion

In the lesson about propTypes it's stated that a warning will be displayed if a) props are not passed in or b) will be of different type than expected by propTypes - In this example, the component RenderName expects to receive a prop called name which is a string. If this prop is not passed, or if it is not a string, a warning will be displayed.

In the case of improper type (b) a warning is displayed, but in the case of not passing in props (a) no warning is displayed. If there's a need to make sure a prop is passed at all, isRequired is needed to display a warning message.

I've thought of fix it along the lines of:

In this example, the component RenderName expects to receive a prop called name which is a string. If this prop is not a string, a warning will be displayed. If you want to make sure a prop is passed in, use isRequired like so:

  RenderName.propTypes = {
     name: PropTypes.string.isRequired,
}

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-type-checking-with-proptypes

Checks

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

(Optional) Discord Name

hebiscus.

(Optional) Additional Comments

No response

[Lofty-Brambles]

Adding .isRequired to the pre-existing example should be suffice. I think the aim is to provide a brief demonstration to propTypes instead of actually documenting such differences, since the documenting is done in the reactjs.org website that is already linked under the mandatory assignments.

[hebiscus]

@Lofty-Brambles Sure, I can see that. Don't really see a need to cut it short, since the section is named "Using propTypes" and isRequired seems to me as equally important as a wrong type of prop passed in to highlight, but fair enough. Would like someone else's opinion for perspective.

[01zulfi]

@TheOdinProject/javascript Can someone provide suggestions on this?

[thatblindgeye]

No strong feeling either way, but it wouldn't hurt to call it out in this small example since it's kinda buried in a lot of other code in the docs under Assignments

[ManonLef]

No strong feeling either way, but it wouldn't hurt to call it out in this small example since it's kinda buried in a lot of other code in the docs under Assignments

I will assign you @hebiscus