Custom proptypes in ReactJS

In this demo we will create a TodoList and will go through custom proptypes of React. First create a folder called todo-list and add npm packages accordingly.

After install npm packages, add startup line to package.json file. I have create app and public folder. App folder will contain all our application related files and public folder will contain publicly accessible files.

First we need to add App.js file. In here we will hard code our data source.

Next we need to add TodoListApp.js file. Content should be like below.

Next add TodoList.js file.

Then for better user interface will add some styles into style.css file.

Then add index.html file into public folder and content should be like below.

Open our TodoList app in browser. However in browser console, you will see an error.

Reason for that is, React requires a key for tree elements. Because keys are fast lookup way to iterate through tree elements. To get rid from this error, will add key to TodoList.js file.

Next will add some proptypes validations to TodoListApp.js file. In here I added a custom proptype called namePropType.

Then in App.js, edit owner name to some longer text. In browser console you will see proptype custom validation error message.