zw896 / form-component

React dynamic form component

code challenge deployed to github pages: https://zw896.github.io/form-component/

Idea & Problems

• JSON data is a nested array, result should be an object.
• Store the id value in dataElements into an new object as the key with "" empty value, so it should be

  {
      "name": "",
      "gender": "",
      ...etc.
  }
  

  problem: how to create this new object based on "dataElements"?
• one parent component: DynamicForm, which contains a child component: Input.

1. Parent component DynamicForm has initial state which contains the data read from JSON file given.
2. Pass the data to child component Input as props.
3. In Input component, determine which the input type is: input/number or select. Using react-select for select tag.
4. handleChange/handleSelectChange functions handle the input value from users.
5. Submit button outputs the final object to console.
6. Validate input value that been received.
7. Output error messages.

PROJECT REQUIREMENTS

• Create a parent component: DynamicForm
• Create a child component: Input

• In DynamicForm

• Accept user input
• Submit user input
• Output the final object to console
• Validate user input
• Error message
• Switch form button
• Calculate bmi value