title: Input field validation in React Js?
body: <p>I am having a variable (in real app it is api) called <code>data</code> which contains value as nested items.</p>
  
  <p>From the level 1 it has title which is displayed already then it has the array called <code>sublevel</code> which has multiple items inside it.</p>
  
  <p>From the sublevel item, I am into making input fields for id, email, firstName, lastName which are already done and things are fine as of now..</p>
  
  <p>In order to make the question clear I have stopped upto this.</p>
  
  <p>Now I am in the need to implement validation for each field individually (At least required field validation and email regex)</p>
  
  <p><strong>Note:</strong> I don't have access to add/remove any value inside the <code>data</code> object because in real app it comes from <code>api</code> for which I don't have access.</p>
  
  <p>So kindly help me how to handle the validation on each individual field..
  Through reactstrap I am generating the form like,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = [
    {
       "Id":22383,
       "title":"Title 1",
       "quantity":5,
       "price":12,
       "sublevel":[
          {
             "confirm":3,
             "status":0,
             "email":"test12@gmail.com",
             "ccoId":"test12",
             "firstName":"test",
             "lastName":"user",
             "partId":22383
          },
          {
             "confirm":3,
             "status":0,
             "email":"",
             "ccoId":"",
             "firstName":"",
             "lastName":"",
             "partId":22383
          },
          {
             "confirm":3,
             "status":0,
             "email":"",
             "ccoId":"",
             "firstName":"",
             "lastName":"",
             "partId":22383
          },
          {
             "confirm":3,
             "status":0,
             "email":"",
             "ccoId":"",
             "firstName":"",
             "lastName":"",
             "partId":22383
          },
          {
             "confirm":3,
             "status":0,
             "email":"",
             "ccoId":"",
             "firstName":"",
             "lastName":"",
             "partId":22383
          }
       ]
    },
    {
       "Id":22383,
       "title":"Title 2",
       "quantity":1,
       "price":5,
       "sublevel":[
          {
             "confirm":3,
             "status":0,
             "email":"test23@gmail.com",
             "ccoId":"test23",
             "firstName":"hello",
             "lastName":"world",
             "partId":22383
          }
       ]
    }
     ]
  
  const {Component, Fragment} = React;
  const {Button, Collapse, Form, FormGroup, Input} = Reactstrap;
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        formData: []
      };
    }
  
    componentDidMount(){
  
    }
    
    render() {
      return &lt;div&gt; 
        {
          data.map((levelOne, i) =&gt; {
             return(
               &lt;div key={i}&gt;
                 &lt;h4&gt; {levelOne.title} &lt;/h4&gt;
                  {
                    levelOne.sublevel.map((subLevel, j) =&gt; {
                     return(
                       &lt;div key={j}&gt; 
                        &lt;Form inline&gt;
                          &lt;FormGroup&gt;
                              &lt;Input name="id" maxLength="50" defaultValue={subLevel.ccoId} placeholder="ccoId" /&gt;
                              &lt;Input name="email" type="email" defaultValue={subLevel.email} placeholder="Email" /&gt;
                              &lt;Input name="firstName" maxLength="50" defaultValue={subLevel.firstName} placeholder="firstName" /&gt;
                              &lt;Input name="lastName" maxLength="50" defaultValue={subLevel.lastName} placeholder="lastName" /&gt;
                             
                          &lt;/FormGroup&gt;
                          &lt;/Form&gt;
                       &lt;/div&gt;
                      )
                    })
                  }
               &lt;/div&gt;
             )
          })
      }
     &lt;Button color="secondary" size="lg" disabled&gt;Submit&lt;/Button&gt;
      &lt;/div&gt;;
    }
  
  }
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am stucked very long time in it to implement validation on each individual input elements and hence please help me.</p>
  
  <p>A big thanks in advance..</p>
  
  <p><strong>Expected result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9cPtv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9cPtv.png" alt="enter image description here"></a></p>