React Todo List

Hello Fellow Developers,

In this continuation series of Material UI  Lets create a todo list using react material UI

For This create a new project using following command:

npx create-react-app todo-list

Now add Material UI to you current application.

npm install @mui/material @emotion/react @emotion/styled

Now for the todo list create a component Todo.jsx

Now add following code to you todo.jsx

import { Button, Container, Input } from '@material-ui/core'
import React, { useState } from 'react'
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import { styled } from '@material-ui/core/styles';
import DeleteIcon from '@material-ui/icons/Delete';
const Todo = () => {
    const [todo, settodo] = useState('')
    const [todos, settodos] = useState([])

    const todochange = (e) => {
        console.log(e.target.value);
        settodo(e.target.value)
    }
    const onsubmit = (e) => {
        e.preventDefault();
        if(todo === ''){
            alert("Please Enter TODO")
            e.preventDefault();
        }
        else{
            settodos(prevstate => ([...prevstate, todo]))
        }
        settodo('')
    }

    const ondelete =(e)=>{
        console.log(e);       
       settodos(todos.filter( (x,y) => y!== e))
    }
    
    const Item = styled(Paper)(({ theme }) => ({
        backgroundColor: '#1A2027',
        ...theme.typography.body2,
        padding: theme.spacing(1),
        color: 'red !important',
        border: '2px solid red'
    }));

    console.log(todos);
    return (
        <>
            <Container maxWidth="sm" style={{marginTop:"20px"}} >
                <form onSubmit={onsubmit} style={{ display: "flex" }} >
                    <Input
                        placeholder="Todo"
                        onChange={todochange}
                        style={{ width: "90%" }}
                        value={todo}
                    />

                    <Button
                        type="submit"
                        variant="contained"
                        color="primary"
                        style={{ width: "10%" }}
                    >
                        Add
                    </Button>
                </form>
            
                <Grid container spacing={12}  direction="column" style={{marginTop:'10px'}}>
                        {
                            todos.map((x, y) => {
                                return  <Grid item xs={12} spacing={8} style={{display: 'flex'}}>
                                <Item style={{width:'100%', display:'flex' , justifyContent:'space-between' , alignItems:'center' , padding:'10px' , margin:'10px 0'}}>{x} <Button key={y} onClick={() =>ondelete(y)}><DeleteIcon /></Button> </Item>
                                
                               </Grid>
                            })
                        }
                </Grid>

            </Container>
        </>
    )
}

export default Todo

Now your start the project and you todo list should work like these: