In this lab, you will practice how to create forms in React and how to handle the values coming from different types of form inputs. Your task will be to implement the logic for a form that has multiple inputs and store their values in the component's state.

• Fork this repo
• Clone this repo

cd lab-react-forms
npm install
npm run dev

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master
  

• Create a Pull Request and submit your assignment.

In this exercise, you will work on the Cohort Tools app - a simple React app used to manage students in a boot camp such as Ironhack. You may have seen this app before in a previous exercise. In this exercise, you will expand the app by implementing a form so that new students can be added to the boot camp directory.

You will do most of your work in the App.jsx file, which already has some starter code. Once you start the app (npm run dev), you will see the following dashboard showing a form and a list of students:

The form you see on the page is meant for adding new students to the list shown on the page. Since forms are the main topic of our exercise today, let's take a closer look at the form displayed on the page.

If you open the App.jsx component, you will see that the form has the following input fields:

The form inputs are not yet linked to the component's state. In the following iterations, you will need to link the inputs to the state and implement the logic to handle the form submission so that when the Add Student button is clicked a new student gets added to the list of students.

When working with forms in React, the first step is to create state variables that will store the values from the form inputs.

In the App.jsx component, create a state variable for each input. Each state variable should be named according to the name attribute of the corresponding input. For example, if the input is <input name="email" />, then the state variable for it should be named email.

Default value of the state variable should be set according to the type of the input:

• text, url, tel, email, and password inputs should have an empty string "" as the default value
• checkbox inputs should have false as the default value
• select inputs should have the string value of the first option set as the default value
• number inputs should always have a default value set, such as 0 or any other number depending on the use case.
  In case the input has validation attributes (min, max), the default value can be set to the min value.

Now that you have created the state variables, the next step is to link each input to its state variable using either the value or checked attribute.

In addition to this, remember to add the onChange event to each input and create handler functions to update the corresponding state variables.

Note: If you need a refresher on how to do this, check the following lesson code example here.

The last step is implementing the form submission. When the Add Student button is clicked, the data from the inputs should be stored as a new object in the students array in the component's state. The new object should have the following structure:

{
  fullName: "example",
  email: "example",
  phone: "example",
  program: "example",
  image: "example",
  graduationYear: 2023,
  graduated: true
}

Once the button Add Student is clicked and the new student object is created, the form inputs should be cleared.

If you implement the logic correctly, you should see the new student added to the list of students.

The form elements and the logic are currently located in the App.jsx component. Your task is to refactor the code and move the form, inputs, and logic to a separate component called <AddStudent />. The <AddStudent /> component should then be rendered in the App.jsx component.

The component should receive 1 prop:

• handleAddStudent - a function that handles the form submission and adds the new student to the list of students. The function should be passed to the <AddStudent /> component from the App.jsx component.

Refactor the handler functions for the form inputs so that they are not defined as separate functions. Instead, you should use the same function for all inputs. The function should be responsible for updating the state variable according to the input that triggered the function.

Happy coding! 💙