Python - Some useful Pytest Commands
Introduction In this post, we will explore some useful command line options for…
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 In this post, we will explore some useful command line options for…
Github is an awesome place of storing your code. Now, it also allows you to have…
Bootstrap has a simple solution to have sticky blocks in your html. I’ve given a…
Introduction In this post, we will see how we can apply a patch to Python and…
Introduction While this topic may applicable to all mysql/mariadb users who…
So, here we are using input variable String[] args without any validation…
Introduction So you have a Django project, and want to run it using docker image…
Introduction It is very important to introduce few process so that your code and…
Introduction In this post, we will see a sample Jenkin Pipeline Groovy script…
Introduction We often require to execute in timed manner, i.e. to specify a max…
Introduction In some of the cases, we need to specify namespace name along with…
Introduction In most of cases, you are not pulling images from docker hub public…