React Js Material UI with Example

Material Design is a UI language based on React which was developed by Google in 2014 and since then it has been favored in building web and mobile applications.

With the Material-UI library, it is very easy to build attractive UI elements with React for mobile and web development. To know more about material UI click here

In this article, we will build a simple shopping list app using material-UI library. So without further due let’s get started

Installation

You will need Node.js package manager such as yarn or npm. Here we will be using npm.

First of all, we will create our project and install material-UI package. We will also install material UI icon packages for displaying icons.

create-react-app materialUI && cd materialUI
npm install @material-ui/core 
npm install @material-ui/icons

Implementing our app

Before importing our packages just add the following line in index.html file which is in public folder.

<head>
    ....
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    ....
</head>

It’s because material-UI uses Roboto fonts.

Now let’s import our necessary packages which we will be needing in our app. Open up App.js file remove everything and import the following module:

import React from 'react';
import './App.css'
import Typography from '@material-ui/core/Typography'
import TextField from '@material-ui/core/TextField'
import Fab from '@material-ui/core/Fab';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import Paper from '@material-ui/core/Paper';

Now we will create a class called App and in it, we will define a constructor. In the constructor, we will define two states called itemlistsand currentItem. itemlists will store overall item in the list and currentItem will store current item which is typed in TextField


class App extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            itemlists: [],
            currentItem: "",
        };
    }
}

Next step is to add a TextField and button in our app.

class App extends React.Component
{

    handleChange(InputValue) 
    {
        this.setState({ currentItem : InputValue });
    }

    handleAddClick() 
    {   
        if (this.state.currentItem !== "") {
            var il = [...this.state.itemlists]
            il.push(this.state.currentItem)
            this.setState({
                itemlists : il,
                currentItem : ""  });
        }
    }
    render()
    {
        return(
            <div className="App">
                <Typography variant="h3" align="center"> Items Lists </Typography>
                <TextField value={this.state.value} 
                    placeholder = "........"  
                    variant = "standard" 
                    label="Add Item" 
                    onChange={(e) => { this.handleChange(e.target.value); } }
                />
                <Fab color='primary' aira-label="add" 
                    onClick={()=>{ this.handleAddClick() }} > <ArrowForwardIosIcon />  </Fab>
    }

Here in the TextField I have implemented a feature such that whenever there is a change in TextField it will update the currentItem state of the component. Then I have used material-UI Fab button(Floating Action Button). Whenever this button is pressed it will take the value from currentItem and add it to itemlists.

It will look something like this:

learn material ui and react

Now let’s create a component which will display our list of the item which is stored in itemlists.


    render()
    {
        return(
            <div className="App">
                <Typography variant="h3" align="center"> Items Lists </Typography>
                <TextField value={this.state.value} 
                    placeholder = "........"  
                    variant = "standard" 
                    label="Add Item" 
                    onChange={(e) => { this.handleChange(e.target.value); } }
                />
                <Fab color='primary' aira-label="add" 
                    onClick={()=>{ this.handleAddClick() }} > <ArrowForwardIosIcon />  </Fab>
                <br/>
                <br/>
                {
                this.state.itemlists.map
                (
                    (value,idx) => 
                        { return(
                              <Paper elevation={3} variant="outlined">
                                <List component="nav" aria-label="Todo">
                                    <ListItem button dense >
                                        <ListItemText key={idx}  primary = {value} >
                                        </ListItemText>
                                        </ListItem>
                                    </List>
                                </Paper>
                                )
                          }
                  )
                }
            </div>
        );
    }

I have used itemlists.map to iterate to every item in the list and display it’s value using ListItemText. Next, we will add a delete button where the user can delete the item from the lists.

    handleDeleteClick(value) 
    {   
            var il = [...this.state.itemlists]
            console.log(value);
            il = il.filter(item => item !== value);

            this.setState({
                itemlists : il,
                currentItem : ""  });
    }

    render()
    {
        return(
            <div className="App">
                <Typography variant="h3" align="center"> Items Lists </Typography>
                <TextField value={this.state.value} 
                    placeholder = "........"  
                    variant = "standard" 
                    label="Add Item" 
                    onChange={(e) => { this.handleChange(e.target.value); } }
                />
                <Fab color='primary' aira-label="add" 
                    onClick={()=>{ this.handleAddClick() }} > <ArrowForwardIosIcon />  </Fab>
                <br/>
                <br/>
                {
                this.state.itemlists.map
                (
                    (value,idx) => 
                        { return(
                              <Paper elevation={3} variant="outlined">
                                <List component="nav" aria-label="Todo">
                                    <ListItem button dense >
                                        <ListItemText key={idx}  primary = {value} >
                                        </ListItemText>
                                        <ListItemIcon>
                                            <Fab aira-label="add" onClick={()=>{this.handleDeleteClick(value) }}>
                                                <DeleteRoundedIcon color="error" fontSize="large" />
                                            </Fab>
                                             </ListItemIcon>
                                        </ListItem>
                                    </List>
                                </Paper>
                                )
                          }
                  )
                }
            </div>
        );
    }
}

The handleDeleteClick method gets the current item of the list and deletes its form itemlists and the component re-render itself. Here is the final output:

ouput

Sharing is caring!

2 thoughts on “React Js Material UI with Example”

Leave a Comment

Your email address will not be published. Required fields are marked *

shares
Scroll to Top