VS-Code - How to put vscode executable in system path and how to open source code directly in vscode
Introduction VS code is an excellent free IDE for maany types of programming…
June 27, 2020
Javascript is not a strict type language. We can use a variable to save any kind of data. Whether its a string or integer or boolean or object. Well, this gives aa flexibility in using the variabales. But, it brings some complexity of making sure that the data is of certain expected type only.
For example, you are showing data of students as:
Example reactjs component:
import React, { Component } from "react";
const Student = ({ name, age, img }) => {
return (
<article>
<img src={img} alt="student" />
<h5>name : {name}</h5>
<h5>age : {age}</h5>
</article>
);
};
class StudentList extends Component {
state = {
students: [
{
id: 1,
img: "some img path",
name: "Raman",
age: 21
},
{
id: 2,
img: "Some image path",
name: "Rahul",
age: 22
}
]
};
render() {
return (
<section>
{this.state.students.map(student => (
<Student
key={student.id}
img={student.img}
name={student.name}
age={student.age}
/>
))}
</section>
);
}
}
class App extends Component {
render() {
return <StudentList />;
}
}
export default App;
If you messed up somewhere in your data. You might ends up showing age in place of name, or name in place of age. Since, there will be no error or warning unless you are doing some special operation with that variable.
Lets discuss abaout making our type strict.
There is a npm module for this purpose: prop-types. To install this module:
npm install prop-types
Lets see the modified component:
import React, { Component } from "react";
import PropTypes from "prop-types";
const Student = ({ name, age, img }) => {
return (
<article>
<img src={img} alt="student" />
<h5>name : {name}</h5>
<h5>age : {age}</h5>
</article>
);
};
Student.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
img: PropTypes.string
};
class StudentList extends Component {
state = {
students: [
{
id: 1,
img: "some img path",
name: "Raman",
age: 21
},
{
id: 2,
img: "Some image path",
name: "Rahul",
age: 22
}
]
};
render() {
return (
<section>
{this.state.students.map(student => (
<Student
key={student.id}
img={student.img}
name={student.name}
age={student.age}
/>
))}
</section>
);
}
}
class App extends Component {
render() {
return <StudentList />;
}
}
export default App;
Notice the usage of propTypes aasa:
Student.propTypes
We are declaring the data types of certain type of data. And, if we try to provide any other kind of data to such variables, react will complain. It will throw errors. And you will come to know the mistakes.
In many scenarios we would require that the data not be null. With prop-types you can specify or restrict with some attributes that this particular data must be present.
Lets see how to do this:
Student.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
img: PropTypes.string
};
Note: Above code will work if you are receiving your values as individual fields. If you are receiving the object, above code will not work. For objects, we have a slightly different way:
Student.propTypes = {
student: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
img: PropTypes.string
})
};
In above code, we have decided that name and age must be present. If our data does not have these fields, then we will get errors.
In many cases, our data does not have some of the attributes. Example: Image is not there. And we would want to declare some default values. It means, if our data does not have any value for particular attribute, please use this default value.
Student.defaultProps = {
img: "some default image path"
};
prop-types does not support Objects for default values.
Introduction VS code is an excellent free IDE for maany types of programming…
Lets implement a command shell by using a command dispatcher. The objective is…
Assuming your web application is using oracle, and you are deploying your app on…
I was using On page optimization of the article pages, and found that meta…
The problem comes while using FTPS. When developer uses login method of this…
I was testing a bug where a field was limited to 255 characters only. I needed…
In this post, we will see some of the frequently used concepts/vocabulary in…
System design interview is pretty common these days, specially if you are having…
Introduction You are given an array of integers with size N, and a number K…
Graph Topological Sorting This is a well known problem in graph world…
Problem Statement Given a Binary tree, print out nodes in level order traversal…
Problem Statement Given an array nums of n integers and an integer target, are…