This content originally appeared on DEV Community and was authored by Web.Developer.io
I have made 2 React App
1) Todo List
2) Color Box Maker
To Do List
Components
App - this component should render the TodoList component
TodoList - this component should render the NewTodoForm component and should render the list of Todo components. Place your state that contains all of the todos in this component.
NewTodoForm - this component should render a form with one text input for the task to be created. When this form is submitted, a new Todo component should be created.
Todo- this component should display a div with the task of the todo.
For each Todo component, there should also be a button with the text “X” that when clicked, removes the todo.
Each Todo component should also display a button with the text “edit” that when clicked, displays a form with the task of the todo as an input and a button to submit the form. When the form is submitted, the task of the text should be updated and the form should be hidden.
https://github.com/Developer-io-web/Todo-list
Color-Box Maker
https://github.com/Developer-io-web/Color-Box-Maker
Components
- App - this component should render the BoxList component.
- BoxList - Place your state that contains all of the boxes here. This component should render all of the Box components along with the NewBoxForm component
- Box- this component should display a div with a background color, width and height based on the props passed to it. NewBoxForm - this component should render a form that when submitted, creates a new Box. You should be able to specify the Box’s width, height, and background color. When the form is submitted, clear the input values.
When each Box component is displayed, add a button with the text of of “X” next to each Box. When this button is clicked, remove that specific box. This will require you to pass a function down as props - the button should not be a seperate component, it should be included in the Box component.
This content originally appeared on DEV Community and was authored by Web.Developer.io
Web.Developer.io | Sciencx (2022-01-18T19:45:25+00:00) Todo List App and a Color Box Maker | Day 13 & 14. Retrieved from https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.