React Name Badge

Using React create a website that looks/works like this:

Requirements:

  • The input fields should NOT directly update the badge fields (meaning when you type in the input box you should NOT see the badge field update - only after the Submit button is pressed will the fields populate.
  • Write code to make sure each field is not empty and has at least 3 characters each
  • If any of the input fields are empty the Submit button should be disabled
  • Write validation code to make sure the phone number field only has numbers (no dashes or special characters, must look like this 9757653323
Optional
  • Store new name Badges in an array and display them using .map. Meaning each time you submit a new badge it instantly appears in the list
  • Make the color of the badge heading background alternate on each list item (ie Red, Blue, Red, Blue (see the dynamic rendering write up)