title: React Hooks - Dynamically Render Text Inputs and Store Inputs as One Array
body: <p>I have a user model that looks like this:</p>
  
  <pre><code>{
      "name": "Sun12",
      "role": "1",
      "email": "sun12@gmail.com",
      "password": "test123",
      "about": "This is a description of me.",
      "skills": ["Acting", "Music", "Art", "English Literature"],
      "studying": "Mind Control"
  }
  </code></pre>
  
  <p>I want to create a form that will capture the above users information. </p>
  
  <p>The <code>skills</code> field in the user schema is arbitrarily long - I want users to be able to add as many skills as they like.</p>
  
  <p>How can I dynamically render text input fields, and send each of the inputs to those dynamically rendered fields to the <code>skills</code> array?</p>
  
  <p>Here is my entire <code>Signup.js</code> file:</p>
  
  <pre><code>// users Signin
  
  import React, {useState} from 'react';
  import Layout from '../core/Layout';
  import {API} from '../config';
  
  const Signup = () =&gt; {
  
    const [values, setValues] = useState({
      name: '',
      email: '',
      password: '',
      studying: '',
      skills: [],
      error: '',
      success: ''
    });
  
    const {name, email, password, studying} = values;
  
  
    const signup = (user) =&gt; {
      fetch(`${API}/signup`, {
        method: "POST",
        headers: {
          Accept: 'application/json',
          "Content-Type": "application/json"
        },
        body: JSON.stringify(user)
      })
      .then(response =&gt; {
        return response.json();
      })
      .catch(err =&gt; {
        console.log(err);
      });
    };
  
    const clickSubmit = event =&gt; {
      event.preventDefault();
      signup({name, email, password, studying});
    };
  
    const handleChange = name =&gt; event =&gt; {
      setValues({...values, error: false, [name]: event.target.value});
    };
  
  
  
    const signUpForm = () =&gt; (
      &lt;form&gt;
          &lt;div className="form-group"&gt;
              &lt;label className="text-muted"&gt;Name&lt;/label&gt;
              &lt;input onChange={handleChange('name')} type="text" className ="form-control" /&gt;
          &lt;/div&gt;
  
          &lt;div className="form-group"&gt;
              &lt;label className="text-muted"&gt;Email&lt;/label&gt;
              &lt;input onChange={handleChange('email')} type="email" className ="form-control" /&gt;
          &lt;/div&gt;
  
          &lt;div className="form-group"&gt;
              &lt;label className="text-muted"&gt;Password&lt;/label&gt;
              &lt;input onChange={handleChange('password')} type="password" className="form-control" /&gt;
          &lt;/div&gt;
  
          &lt;div className="form-group"&gt;
              &lt;label className="text-muted"&gt;Studying&lt;/label&gt;
              &lt;input onChange={handleChange('studying')} type="text" className ="form-control" /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;div&gt;{createInputs()}&lt;/div&gt;
              &lt;button onClick={addSkill}&gt;Add&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;button onClick={clickSubmit} className="btn btn-primary"&gt;
            Sign Up
          &lt;/button&gt;
  
      &lt;/form&gt;
    );
  
  
    return(
    &lt;Layout 
      title="Signup" 
      description="Join today."
      className="container col-md-8 offset-md-2"&gt;
        {signUpForm()}
        {JSON.stringify(values)}
    &lt;/Layout&gt;
    );
  };
  
  export default Signup;
  
  </code></pre>