title: Validation Table Items on add
body: <p>I have an issue with adding an item to my table. I have a simple reactjs code below. I can add a row easily there. The issue is, it should not allow me to add same name. Means, if I have name &quot;John&quot; already added in the table, validation should not allow me to add one more &quot;Jonh&quot;. I have attached my snippet below. Will appreciate any assist.
  Thank you very much!</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>function Text(props) {
    var style = {
      paddingTop: 5,
      margin: 5
    };
    return (
      &lt;div&gt;
        &lt;div style={style}&gt; {props.label} &lt;/div&gt;
        &lt;input
          type="text"
          name={props.name}
          style={style}
          value={props.labelInputText}
          onChange={props.changeHandler}
        /&gt;
      &lt;/div&gt;
    );
  }
  function TableFormList(props) {
    
    return(
      &lt;table&gt;
      &lt;tr&gt;
     {props.headers.map((item,index) =&gt; &lt;th key={index}&gt;{item}&lt;/th&gt;)}
      &lt;/tr&gt;
      &lt;tbody&gt;
      
       {props.formElements.map((item,index) =&gt; &lt;tr key={index}&gt;&lt;td&gt;{item.fName}&lt;/td&gt;&lt;td&gt;{item.lName}&lt;/td&gt;&lt;/tr&gt; )}
      &lt;/tbody&gt;
  &lt;/table&gt;
      )
      }
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        firstName: "",
        lastName: "",
        items: []
      };
      this.changeHandler = this.changeHandler.bind(this);
      this.AddElementsOnSubmit = this.AddElementsOnSubmit.bind(this);
    }
    changeHandler(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    AddElementsOnSubmit() {
      var firstName = this.state.firstName;
      var lastName = this.state.lastName;
  
      var elements = this.state.items.slice();
      elements.push({fName: firstName, lName: lastName});
      this.setState({ items: elements, firstName: "", lastName: "" });
    }
  
    render() {
      var style = {
        padding: 5,
        margin: 5
      };
      return (
        &lt;div&gt;
          &lt;Text
            label="First Name"
            name="firstName"
            labelInputText={this.state.firstName}
            changeHandler={this.changeHandler}
          /&gt;
  
          &lt;Text
            label="Last Name"
            name="lastName"
            labelInputText={this.state.lastName}
            changeHandler={this.changeHandler}
          /&gt;
  
     &lt;input
            type="submit"
            value="submit"
            style={style}
            onClick={() =&gt; this.AddElementsOnSubmit()}
          /&gt;
       
          &lt;div&gt;
            &lt;TableFormList
              headers={["First Name", "Last Name"]}
              formElements={this.state.items}
            /&gt;
            
  
          &lt;/div&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;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>