/ToDoList

A pair programming to do list. React app to keep track of tasks.

Primary LanguageJavaScript

To do list - REACT

A pair programming project done in week 6 of the School of Code bootcamp. It was the first project I made using React.js components and state.

Take a look at the application here

https://react-lists.netlify.app/

Component Tree

  • App
    • Input
      • text input
      • add to list button
    • List
      • List Item
        • item text
        • delete button
      • List Item
        • item text
        • delete button
      • List Item
        • item text
        • delete button
      • List Item
        • item text
        • delete button ...

Components

App

state

  • list of to dos

behaviour

  • add item to list
  • remove item from list
  • render an Input and List

Input

state

  • text

props

  • add function

behaviour

  • render an input field and a button
  • change of input text will update state of this component
  • button click will call the add function from props with value of input

List

props

  • array of to dos
  • delete function

behaviour

  • render an array of ListItems in a ul

List item

props

  • text
  • delete function

behaviour

  • render the text and a button
  • when the button is clicked call the delete function to delete item at this index