Support us on YouTube by Subscribing our YouTube Channel. Click here to Subscribe our YouTube Channel

Saturday 14 September 2019

Stellar Toolkit for MS SQL

Introduction:
Stellar Toolkit for MS SQL is a combination of three tools pack. You can repair corrupt SQL database, extracts the database from the corrupt backup file and recover SQL SA and user password. Stellar Toolkit for MS SQL works on all the component of the database like views, indexes, tables, triggers, keys, etc. and provides you 100% database integrity.

Sunday 14 July 2019

Getting Started with Python

In this article, we will learn how to start learning Python and create the first “Hello World” application using Python.

Key points covered in this article are:

  • What is Python
  • Installing Python (in windows)
  • Installing and using Visual Studio Code for Python development
  • Woking with IDLE
  • Visual Studio for Python development
  • Anaconda Distribution and Jupyter NoteBook 

Sunday 9 June 2019

Export and Import Excel file using ClosedXML in ASP.NET MVC

In software applications, sometime user needs to export or Import the data in Excel format in order to perform several operations. In this Article, we will learn How to Export and Import Excel file with ClosedXML package in ASP.NET MVC. ClosedXML is a .NET Library for writing and manipulating the Excel 2007+ files. It’s available free on GitHub to use it for the commercial project. For more details, click here to view the license on GitHub.

Sunday 24 March 2019

Sunday 3 March 2019

State and Props in React Native Application

In this Article, we will see How to use State and Props in React Native Application. If you are new to React Native, then I will recommend you to read the previous article of this series.


In React (or React Native), there are two types of data that can control a component. One is State and another is Props.

State: State can be referred as the local state of the component. State of a component cannot be accessed and modified outside of the component. State is mutable, which means that the state of a component can be changed in response to some action. State of one component can behave as Props for the other component as well. We cannot update the state directly, in order to update the state of the component, we have to use setState method. setState will re-render the parent component as well as the child component class.

Let’s see How we can use state in React Native Application.
App.js Code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
    state = {
        Counter: 1
    }
    updateState = () =>
        this.setState({ Counter: this.state.Counter + 1 })
    render() {
        return (
            <View style={styles.container}>
                <Text style={{ fontSize: 40 }}>State Example</Text>
                <Text style={{ fontSize: 40 }} onPress={this.updateState}>
                    {this.state.Counter}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
In the above example, we have created state object and added a Counter property with initial value as 1. We have declared updateState function in order to update the state using the setState method. On calling setState, it will re-render the Component. On the Text component, we are using onPress Touch event which will can the updateState function and increase the counter value with 1. Now let’s run the application with npm Start command.
Preview:

Props: Props stands for the properties and used to pass data as well as an event handler to the child components (passing data from the view to the controller or from parent to the child). It is immutable that means we cannot change its value and have fast performance than the state. Let’s do some changes in the previous example in order to check its functionality. In order to demonstrate we need two Classes, one will behave as parent and other will behave as child.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Child from './ChildApp';

export default class App extends React.Component {
    state = {
        Counter: 1
    }

    updateState = () => this.setState({ Counter: this.state.Counter + 1 })
    render() {
        return (
            <View style={styles.container}>
                <Child myCounter={this.state.Counter} updateState={this.updateState}></Child>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
In the above code, we are importing the Child class (code for the Child class is provided below) and passed Counter value(as myCounter attribute in JSX) as well as function (as updateState atribute) for the updating the State as props.
ChildApp.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Child extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={{ fontSize: 40 }}>Props Example</Text>
                <Text style={{ fontSize: 40 }} onPress={this.props.updateState}>
                    {this.props.myCounter}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
As we know, our Child class is receiving multiple props so we can use this.props.<Name_Of_Property> in order to access its value.
Preview:
Hope this will help you.
Thanks.

Subscribe us on YouTube

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Like us on Facebook