How to Patch and Build Python 3.9.x for FIPS enabled Openssl
Introduction In this post, we will see Python 3.9.x patch for FIPS enabled…
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 see Python 3.9.x patch for FIPS enabled…
Introduction To give some context, I have two python files. (Both in same folder…
To download this code from git: See: Gyanblog Github
This article shows some of common usages of JIRA rest apis. Note: This article…
Introduction In this post, we will discuss 3 different ways to import a…
So, you want to run your code in parallel so that your can process faster, or…
Introduction In this post we will see following: How to schedule a job on cron…
Introduction There are some cases, where I need another git repository while…
Introduction In this post, we will see how to fetch multiple credentials and…
Introduction I have an automation script, that I want to run on different…
Introduction I had to write a CICD system for one of our project. I had to…
Introduction Java log4j has many ways to initialize and append the desired…