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: