title: how to use separate validation form in react js
body: <p>I am new to ReactJS.</p>
  <p>I want to separate the validation code from this file and move it to a new file that handles validation.</p>
  <p>When I am trying to send the props from the render method, it is showing the validation three or four times. I know this is not the right way to do this.</p>
  <pre><code>import React from 'react';
  import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
  import { NotificationManager } from 'react-notifications';
  import {AddService} from '../../api/service'
  import { CSelect } from '@coreui/react';
  import Validation from '../validation/service'
  
  class AddEditForm extends React.Component {
  
      state = {
          id: '',
          name: '',
          description: '',
          duration:'',
          price: '',
          validation : false,
      }
  
      onChange = e =&gt; {
          this.setState({ [e.target.name]: e.target.value })
      }
  
      submitFormAdd = async(e) =&gt; {
          e.preventDefault ()
          await this.Validation()
          if (this.state.validation == true) {
          //API
          }
      }
  
      submitFormEdit = async(e) =&gt; {
          e.preventDefault ()
          await this.Validation()
          if (this.state.validation == true) {
              //API
          }
      }
  
  // VALIDATION FILE
  
      Validation = (e) =&gt; {
  
          let isnum = /^\d+$/.test(this.state.price);
          if (!this.state.name) {
              NotificationManager.error('Please Enter Service Name', 'Info', 2000)
              return false;
          }
          if (!this.state.description) {
              NotificationManager.error('Please Enter Description', 'Info', 2000)
              return false;
          }
          if (!this.state.price) {
              NotificationManager.error('Please Phone price', 'Error', 2000)
              return false
          }
          if (!this.state.duration) {
              NotificationManager.error('Please Service Duration', 'Error', 2000)
              return false
          }
          if (isnum !== true) {
              NotificationManager.error('Please Enter Price in Number', 'Error', 2000)
              return false
          }
          else {
             this.setState({validation : true})
          }
      }
  
      componentDidMount() {
          if (this.props.item) {
              const { id, name, description, price, duration } = this.props.item
              this.setState({ id, name, description, price, duration })
          }
      }
  
      render() {
          return (
              &lt;Form onSubmit={this.props.item ? this.submitFormEdit : this.submitFormAdd}&gt;
                  &lt;FormGroup&gt;
                      &lt;Label for=&quot;name&quot;&gt;Name&lt;/Label&gt;
                      &lt;Input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; onChange={this.onChange} value={this.state.name === null ? '' : this.state.name} /&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                      &lt;Label for=&quot;description&quot;&gt;Description&lt;/Label&gt;
                      &lt;Input type=&quot;text&quot; name=&quot;description&quot; id=&quot;description&quot; onChange={this.onChange} value={this.state.description === null ? '' : this.state.description} /&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                      &lt;Label for=&quot;price&quot;&gt;Price&lt;/Label&gt;
                      &lt;Input type=&quot;price&quot; name=&quot;price&quot; id=&quot;price&quot; onChange={this.onChange} value={this.state.price === null ? '' : this.state.price} /&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                      &lt;Label for=&quot;duration&quot;&gt;Duration&lt;/Label&gt;
                      &lt;CSelect custom size=&quot;lg&quot; name=&quot;selectLg&quot; id=&quot;selectLg&quot; value={this.state.duration} onChange={(e) =&gt; this.setState({duration : e.target.value})}&gt;
                        &lt;option value=&quot;&quot;&gt;Select Duration&lt;/option&gt;
                        &lt;option value=&quot;3 Months&quot;&gt;3 Months&lt;/option&gt;
                        &lt;option value=&quot;6 Months&quot;&gt;6 Months&lt;/option&gt;
                        &lt;option value=&quot;1 year&quot;&gt;1 year&lt;/option&gt;
                        &lt;option value=&quot;2 year&quot;&gt;2 year&lt;/option&gt;
                        &lt;option value=&quot;4 year&quot;&gt;4 year&lt;/option&gt;
                      &lt;/CSelect&gt;
                  &lt;/FormGroup&gt;
                  &lt;Button&gt;Submit&lt;/Button&gt;
              &lt;/Form&gt;
          );
      }
  }
  
  export default AddEditForm
  </code></pre>
  <p>I want form validation in separate file and validate it through prop:</p>
  <pre><code>Validation = (e) =&gt; {
  
          let isnum = /^\d+$/.test(this.state.price);
          if (!this.state.name) {
              NotificationManager.error('Please Enter Service Name', 'Info', 2000)
              return false;
          }
          if (!this.state.description) {
              NotificationManager.error('Please Enter Description', 'Info', 2000)
              return false;
          }
          if (!this.state.price) {
              NotificationManager.error('Please Phone price', 'Error', 2000)
              return false
          }
          if (!this.state.duration) {
              NotificationManager.error('Please Service Duration', 'Error', 2000)
              return false
          }
          if (isnum !== true) {
              NotificationManager.error('Please Enter Price in Number', 'Error', 2000)
              return false
          }
          else {
             this.setState({validation : true})
          }
      }
  </code></pre>