Posts

Showing posts from May, 2022

Understanding and Implementing Schemas in Python

-
Understanding and Implementing Schemas in Python Introduction In the world of programming, particularly in the context of data management and validation, schemas play a vital role. A schema is essentially a blueprint or a predefined structure that defines the expected format, data types, and constraints for a given data entity. In this blog, we will delve into the concept of schemas in Python, exploring what they are, why they are important, and how you can implement them in your projects. What is a Schema? A schema serves as a contract between different components of a system, ensuring that data is consistent, valid, and well-structured. It defines the rules for how data should be organized, what fields it should contain, and what types of values those fields can hold. In essence, a schema acts as a set of rules that data must adhere to in order to be considered valid. Why Are Schemas Important? Data Validation: Schemas provide a way to validate incoming data. When data is received o
Post a Comment
Read more

Controlled Component in React Js

-
Image
C ontrolled Component in React Js In every web application, handing form data is very basic requirement and if you want to handle this requirement in react Js, it provides two ways controlled component and uncontrolled component . According to official document of React Js, it is recommended that in most of cases, controlled component should be implemented for Forms, but in this post, we will discuss about controlled  component. In controlled component, Form data is stored in component's state and updated by "onChangeHandler" We can use single event handler for handling all form fields, regardless of type.    Controlled Component in react js Sample Code: A) Class Component   a) App.js import   React , {  Component  }  from   'react' ; class   App   extends   Component  {    constructor ( props ) {      super ( props );      this . handleSubmit  =  this . handleSubmit . bind ( this );      this . onChangeHandler  =  this . onChangeHandler . bind ( this );      this
Post a Comment
Location: Pune, Maharashtra, India
Read more

Uncontrolled Component in React Js

-
Image
Uncontrolled Component in React Js In every web application, handing form data is very basic requirement and if you want to handle this requirement in react Js, it provides two ways controlled component and uncontrolled component. According to official document of React Js, it is recommended that in most of cases, controlled component should be implemented for Forms, but in this post, we will discuss about uncontrolled  component. Basic Difference between controlled and uncontrolled component: a) In a controlled component, form data is handled by a React component. b) In a uncontrolled component, form data is handled by the DOM itself. Uncontrolled Component in React Js Default Values: With an uncontrolled component, if you want to specify the initial value, you can specify a defaultValue attribute instead of value. Sample Code: A) Class Component   a) App.js import   React , {  Component  }  from   'react' ; class   App   extends   Component  {    constructor ( props ) {     
Post a Comment
Location: Pune, Maharashtra, India
Read more

React Fragment in React Js

-
React Fragment in React Js It was first introduced in react version 16.2 Fragments lets you to group a list of children without adding extra nodes ( div ) to the DOM. It is common practice in react Js that, we need to return multiple elements from a component. Sample Code: A) App.js ( with div tag ) - There is a one problem associated with below code, clearly it will add one extra div tag which is unnecessary. import   React   from   "react" ; export   default   function   App () {    return  (      // Extra div tag is added      < div >        < h1 > Hello </ h1 >        < p > Welcome to Vikas Programming </ p >      </ div >   ); } B) App.js ( with <React.Fragment> tag ) - This will not add any extra element in DOM, so its solution to above problem. import   React   from   "react" ; export   default   function   App () {    return  (      // No extra div tag is added      < React.Fragment >        < h1 > He
2 comments
Location: Pune, Maharashtra, India
Read more