Task 3c : Todo - Githubissues

yogeshtakeo commented 1 year ago

Simple Todo ( Adding Bonus )

Objective

The objective of this exercise is to assess the participants' understanding and proficiency in using the useState hook and working with component props in a React application.

Hint : Look for onClick event, Look for onChange event for input feild. you can also look up Form Handling

Task Description

You are tasked with creating a simple todo list component that allows users to add and remove tasks. The tasks will be passed to the component as a prop.

Instructions

Create a new React component named TodoList.
Define a functional component named TodoList that takes a single prop named tasks.
Inside the TodoList component, use the useState hook to create a state variable named todoItems and initialize it with the value of the tasks prop.
Display the list of tasks in the component's JSX using an appropriate HTML element (e.g., ul or div).
Add an input field and a button labeled "Add" to allow users to enter new tasks. Bind the value of the input field to a new state variable named newTask.
Create a function that handles the addition of new tasks. This function should update the todoItems state by adding the new task to the existing list of tasks.
Attach the function from step 6 to the button's onClick event to trigger the addition of new tasks when the button is clicked.
Customize the styling of the component and the task list using CSS or a CSS-in-JS solution of your choice.
Test the TodoList component by rendering it with different initial tasks and verifying that new tasks can be added and removed correctly.

Additional Requirements

The tasks prop passed to the TodoList component should be an array of strings representing the initial tasks.
The task list should only be displayed when there are tasks present in the list.

Git and GitHub

Create a new GitHub repository for this exercise.
Push your project to the GitHub repository.
Take screenshots of the code in your TodoList.js file and the rendered component.
Go to the GitHub repository's issues section and create a new issue.
In the issue's comment section, upload the screenshots of your code and the rendered component.
Include the GitHub repository URL in the comment as well.

Submission

Share the screenshots of your code and the rendered component in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or CSS features or syntax to enhance your solution. Provide comments where necessary to explain your code.