C# Programming Tutorial(8920128728)

Wednesday, 27 October 2021

What is React State?

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components.

It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

A state must be kept as simple as possible. It can be set by using the setState() method and calling setState() method triggers UI updates.

A state represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly. To set an initial state before any interaction occurs, we need to use the getInitialState() method.

For example, if we have five components that need data or information from the state, then we need to create one container component that will keep the state for all of them.

Defining State

To define a state, you have to first declare a default set of values for defining the component's initial state. To do this, add a class constructor which assigns an initial state using this.state. The 'this.state' property can be rendered inside render() method.

Example

The below sample code shows how we can create a stateful component using ES6 syntax.

import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { displayBio: true };
}
render() {
const bio = this.state.displayBio ? (
<div>
<p><h3>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a team of experienced Java developers and trainers from multinational companies to teach our campus students.</h3></p>
</div>
) : null;
return (
<div>
<h1> Welcome to JavaTpoint!! </h1>
{ bio }
</div>
);
}
}
export default App;

To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.

Output

ReactJS State

Changing the State

We can change the component state by using the setState() method and passing a new state object as the argument. Now, create a new method toggleDisplayBio() in the above example and bind this keyword to the toggleDisplayBio() method otherwise we can't access this inside toggleDisplayBio() method.

this.toggleDisplayBio = this.toggleDisplayBio.bind(this);

Example

In this example, we are going to add a button to the render() method. Clicking on this button triggers the toggleDisplayBio() method which displays the desired output.

import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { displayBio: false };
console.log('Component this', this);
this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
}
toggleDisplayBio(){
this.setState({displayBio: !this.state.displayBio});
}
render() {
return (
<div>
<h1>Welcome to JavaTpoint!!</h1>
{
this.state.displayBio ? (
<div>
<p><h4>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a team of experienced Java developers and trainers from multinational companies to teach our campus students.</h4></p>
<button onClick={this.toggleDisplayBio}> Show Less </button>
</div>
) : (
<div>
<button onClick={this.toggleDisplayBio}> Read More </button>
</div>
)
}
</div>
)
}
}
export default App;

Output:

ReactJS State

When you click the Read More button, you will get the below output, and when you click the Show Less button, you will get the output as shown in the above image.

ReactJS State

Developing Solutions for Microsoft Azure: Implementing IaaS Solutions

Question(1): Which is an example of serverless compute?

Ans:

Question(2)

Which is a group of datacenters in one geographic location?

Ans:

Question(3)

How can you access PowerShell for Azure?

Ans:

Question(4)

ARM templates use what type of syntax?

Ans:

Question(5)

What format do ARM templates use?

Ans:

Question(6)

What is included in a container?

Ans:

Question(7)

What is the name of the container image file?

Ans:

Question(8)

Azure Container Registry is built on which technology?

Ans:

Question(9)

What is the tool used to rebuild images based on upstream code commits?

Ans:

Question(10)

Where can container images be sourced from?

Ans:

Tuesday, 26 October 2021

React Material UI Expansion Panel And Dialogs

In this article, we will learn how to add dialogs boxes and Expansion Panel in React applications. The expansion panel is used to show and hide content. The expansion Panel basically manages a large amount of content and list data. Dialogs are used to show notifications and alert messages.

You can check my previous article in which we discussed the basics of Material UI, from the below-mentioned links.

Add Material UI In React Application
Add Material-UI Table In ReactJS Application

Prerequisites

Basic Knowledge of React
Visual Studio Code
Node and NPM installed
Material UI Installed

Create ReactJS project

Let's first create a React application using the following command.

npx create-react-app matform    

Install Material-UI

Now Install Material-UI by using the following command.

npm install @material-ui/core --save    

Now install Material icons by using the following command.

npm install @material-ui/icons  

Now, right-click on the "src" folder and add a new component named 'Panel.js

First let’s import required material UI component; add the following reference in this component.

import AppBar from '@material-ui/core/AppBar';  
import Toolbar from '@material-ui/core/Toolbar';  
import ExpansionPanel from '@material-ui/core/ExpansionPanel';  
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';  
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';  
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';  

Add the following code in panel component.

import React, { Component } from 'react'    
import AppBar from '@material-ui/core/AppBar';    
import Toolbar from '@material-ui/core/Toolbar';    
import ExpansionPanel from '@material-ui/core/ExpansionPanel';    
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';    
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';    
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';    
export class Panel extends Component {    
        render() {    
                return (    
                 <div>    
                  <AppBar position="static">    
                   <Toolbar style={{ 'paddingLeft': "600px" }}>    
                    Material UI Expansion Panel    
                    </Toolbar>    
                     </AppBar>    
                      <ExpansionPanel>    
                      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>} >    
                        <p>Delhi</p>    
                        </ExpansionPanelSummary>    
                        <ExpansionPanelDetails>    
                        <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000 people </p>    
                      </ExpansionPanelDetails>    
                         </ExpansionPanel>    
                          <ExpansionPanel>    
                            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>} >    
                              <p>Bangalore</p>    
                               </ExpansionPanelSummary>    
                                 <ExpansionPanelDetails>    
                                <p>   Bengaluru (also called Bangalore) is the capital of India's southern Karnataka state. The center of India's high-tech industry, the city is also known for its parks and nightlife. By Cubbon Park, Vidhana Soudha is a Neo-Dravidian legislative building. Former royal residences include 19th-century Bangalore Palace, modeled after England’s Windsor Castle, an 18th-century teak structure </p>    
                                        </ExpansionPanelDetails>    
                                </ExpansionPanel>    
                                <ExpansionPanel >    
                                 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>}        >    
                                   <p>Jaipur</p>    
                                 </ExpansionPanelSummary>    
                                <ExpansionPanelDetails>    
                       <p>  Jaipur is the capital of India’s Rajasthan state. It evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, colonnaded City Palace comple </p>    
                                        </ExpansionPanelDetails>    
                                </ExpansionPanel>    
                        </div>    
                )    
        }    
}    
    
export default Panel     

Now run the project by using 'npm start'.

React Material UI Expansion Panel And Dialogs

Dialog Box:Dialogs are used to show notifications and alert messages.

Now, right-click on the "src" folder and add another component named 'Dialog.js'. In this component, we add dialog boxes to show important messages and information.

Add the following code in Dialogcomponent.

import React from 'react';  
import Button from '@material-ui/core/Button';  
import Dialog from '@material-ui/core/Dialog';  
import DialogActions from '@material-ui/core/DialogActions';  
import DialogTitle from '@material-ui/core/DialogTitle';  
import AppBar from '@material-ui/core/AppBar';  
import Toolbar from '@material-ui/core/Toolbar';  
  
export default function Dialogs() {  
  const [state, setstate] = React.useState(false);  
  
  const Open = () => {  
    setstate(true);  
  };  
  
  const Close = () => {  
    setstate(false);  
  };  
  
  return (  
    <div>  
      <AppBar className="mrg" position="static">  
       <Toolbar style={{ 'paddingLeft': "600px" }}>  
           Material UI Dialog  
         </Toolbar>  
        </AppBar>  
      <Button variant="contained" color="primary" onClick={Open}>  
        Open Dialog  
      </Button>  
      <Dialog  
        open={state}  
        onClose={Close}  
        aria-labelledby="alert-dialog-title"  
        aria-describedby="alert-dialog-description" >  
        <DialogTitle id="alert-dialog-title">{"Are you Sure to Delete?"}</DialogTitle>  
        <DialogActions>  
          <Button onClick={Close} color="primary">  
            Yes  
          </Button>  
          <Button onClick={Close} color="primary" autoFocus>  
             No  
          </Button>  
        </DialogActions>  
      </Dialog>  
    </div>  
  );  
}  

Now open app.css file and add the following code

.mrg{  
  margin-top: 20px;  
  margin-bottom: 20px;  
}  
.pding  
{  
  padding-left: 500px;  
}  

Now open app.js file and add the following code.

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import Form from './Form'  
import Dialogs from './Dialog'  
  
function App() {  
  return (  
    <div className="App">  
      <Panel></Panel>  
    </div>  
  );  
}  
  
export default App;  

Now run the project and check the result.

Click on the button,

Summary

In this article, we learned how we add Expansion Panel and dialogs in Reactjs applications. Expansion Panel is used to show and hide content.