https://github.com/basuabhirup/react-todo-list
Created with CodeSandbox
https://github.com/basuabhirup/react-todo-list
javascript jsx react-components react-props react-state reactjs
Last synced: 27 days ago
JSON representation
Created with CodeSandbox
- Host: GitHub
- URL: https://github.com/basuabhirup/react-todo-list
- Owner: basuabhirup
- Created: 2021-09-22T16:31:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-23T12:29:07.000Z (over 4 years ago)
- Last Synced: 2025-10-06T23:37:26.632Z (8 months ago)
- Topics: javascript, jsx, react-components, react-props, react-state, reactjs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/github/basuabhirup/react-toDo-list
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# To-Do List with React
### CodeSandbox Live Site URL: [https://codesandbox.io/s/github/basuabhirup/react-toDo-list](https://codesandbox.io/s/github/basuabhirup/react-toDo-list)
This project is a part of [The Complete 2021 Web Development Bootcamp](https://www.udemy.com/course/the-complete-web-development-bootcamp/) by [London App Brewery](https://www.londonappbrewery.com/), instructed by Dr. Angela Yu.
## Objective of this Project:
- To create a functional To-Do List app from the starting files.
- When new text is written into the input, its state should be saved.
- When the add button is pressed, the current data in the input should be added to an array.
- The `
- ` should display all the array items as `
- `s.
## Steps I have followed:
1. Created a new state variable `item` using `useState()` react hook to keep track of changes made on the input field.
```javascript
const [item, setItem] = useState("");function handleChange(e) {
setItem(e.target.value);
}
``````html
```
2. Created another state variable `itemsArray` using `useState()` react hook to save the items when the add button is pressed.
```javascript
const [itemsArray, setItemsArray] = useState([]);function addItem() {
setItemsArray([...itemsArray, item]);
setItem("");
}
``````html
Add
```3. Used `map()` method on the `itemsArray` to render all the items as `
- `s in the list:
```javascript
{
itemsArray.map((item) => - {item} );
- {props.itemName} ;
- props.onClick(props.id)}>{props.itemName} ;
}
```
4. Created two new components - `Input` and `Item` inside `App` for reusability, modularity and a better readability.
5. Modified the code to keep the app functional by managing states and props of all the components:
```javascript
// Inside 'components/App.jsx'
function addItem(item) {
setItemsArray([...itemsArray, item]);
}
;
// Inside 'components/Input.jsx'
function Input(props) {
const [item, setItem] = useState("");
function handleChange(e) {
setItem(e.target.value);
}
return (
{
props.onClick(item);
setItem("");
}}
>
Add
);
}
```
```javascript
// Inside 'components/App.jsx'
{itemsArray.map((item) => (
))}
// Inside 'components/Item.jsx'
function Item(props) {
return
}
```
6. Created a new function `deleteItem` inside `App` component and passed the same to its child `Item` component. Also, passed the correspoding index value to the child component:
```javascript
function deleteItem(id) {
setItemsArray((prevValue) => {
return prevValue.filter((item, index) => {
return index !== id;
});
});
}
{itemsArray.map((item, index) => (
))}
```
7. Modified the code inside the `Item` component, so that after receiving props it can use them properly to delete an item that gets clicked.
```javascript
function Item(props) {
return
}
```