title: React.js form validation with Joi-Browser not working as expected
body: <p>I'm trying to make a multi-step form using React.js and material UI. for validation purpose I am using Joi-Browser. But I am getting error from Joi while validation, stating that error: <code>ValidationError: "value" must be an object</code>
  I am very new to React.js Please guide me what I am doing wrong here.
  here what I have tried so far.</p>
  
  <pre><code>class ServiceRequestForm extends Component {
  
      state = {
          step: 1,
          service_category: [],
          user : [
              {
                  full_name: '',
                  address_one: '',
              }
          ],
  
          hasError: false
      }
  
       schema = Joi.object().keys({
          full_name: Joi.string().alphanum().min(3).max(100).required(),
          address_one: Joi.string().required(),
  
      });    
      validate = () =&gt; {
          const result = Joi.validate(this.state.user, this.schema)
          console.log(result)
      }    
      // Proceed to next step
  
      nextStep = () =&gt; {
          const { step } = this.state;
          this.setState({
              step: step + 1
          });
      }
      // Proceed to prev step
  
      prevStep = () =&gt; {
          const { step } = this.state;
          this.setState({
              step: step - 1
          });
      }
  
  // handle select
  
      handleChange = (event)=&gt; {
          this.setState(oldValues =&gt; ({
            ...oldValues,
            [event.target.name]: event.target.value,
          }));
        }
  // handle input
  
       handleChangeInput = name =&gt; event =&gt; {
           this.setState({ [name]: event.target.value });
         };    
  
      handleSubmit = ()=&gt;{
            this.validate();
        }
  
  
      render() {
  
          const { step } = this.state;
          const { service_category } = this.state;
  
  
          const { full_name, address_one } = this.state.user;
  
          const values = { service_category,  full_name, address_one };
  
          switch (step) {
              case 1:
                  return (
                      &lt;CategoryForm
                          nextStep={this.nextStep}
                          handleChange={this.handleChange}
                          values={values}
                      /&gt;
                  );
              case 2:
                  return (
                      &lt;AddressForm
                          prevStep={this.prevStep}
                          handleChangeInput={this.handleChangeInput}
                          handleSubmit={this.handleSubmit}
                          values={values}
  
                      /&gt;
                  );
              case 3:
                  return (
                      &lt;ThankYouPage
  
                      /&gt;
                  );
  
          }
      }
  }
  
  
  export default ServiceRequestForm;
  </code></pre>
  
  <p>// Category form</p>
  
  <pre><code>export default class CategoryForm extends Component {
  
      continue = e =&gt; {
          e.preventDefault();
          this.setState({ hasError: false });
          if (!this.props.values.service_category) {
              console.log(this.props.hasError);
              this.setState({ hasError: true });
          }
          else {
              this.props.nextStep();
          }
  
      }
  
      render() {
  
        const { handleChange, values, classes, nextStep, hasError } = this.props;
  
          return (
  
              &lt;div&gt;
  
                  &lt;h4&gt;Select service you want&lt;/h4&gt;
  
                  &lt;form&gt;
                      &lt;FormControl error={hasError}&gt;
  
                          &lt;Select
                              value={values.service_category}
                              onChange={handleChange}
                              inputProps={{
                                  name: 'service_category'
  
                              }}
  
                          &gt;
                              &lt;MenuItem value=""&gt;
                                  &lt;em&gt;Select Category&lt;/em&gt;
                              &lt;/MenuItem&gt;
                              &lt;MenuItem value={10}&gt;House Maid&lt;/MenuItem&gt;
                              &lt;MenuItem value={20}&gt;Electricians&lt;/MenuItem&gt;
                              &lt;MenuItem value={30}&gt;Plumber&lt;/MenuItem&gt;
                          &lt;/Select&gt;
                          &lt;FormHelperText&gt;Please select service category&lt;/FormHelperText&gt;
                          {hasError &amp;&amp; &lt;FormHelperText&gt;This is required!&lt;/FormHelperText&gt;}
                      &lt;/FormControl&gt;
                  &lt;/form&gt;
  
  
                  &lt;br /&gt;
  
  
                  &lt;Button variant="contained" color="primary" onClick={this.continue}&gt;Next&lt;/Button&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>// address form</p>
  
  <pre><code>export default class AddressForm extends Component {
  
      back = e =&gt; {
          e.preventDefault();
          this.props.prevStep();
      }
  
  
      render() {
  
          const { handleChangeInput, values, classes, handleSubmit, prevStep, hasError, full_name } = this.props;
  
  
          return (
              &lt;div&gt;
                  &lt;h1&gt;Address&lt;/h1&gt;
  
                  &lt;TextField
  
                      label="Full Name"
                      //className={classes.textField}
                      value={values.full_name}
                      onChange={handleChangeInput('full_name')}
                      margin="normal"
                      variant="outlined"
                  /&gt;
  
                  &lt;TextField
  
                      label="Address Line 1"
                      //className={classes.textField}
                      value={values.address_one}
                      onChange={handleChangeInput('address_one')}
                      margin="normal"
                      variant="outlined"
                  /&gt;
  
                  &lt;Button variant="contained" color="primary" onClick={handleSubmit}&gt;Submit&lt;/Button&gt;
                  &lt;Button variant="contained" color="primary" onClick={prevStep}&gt;Back&lt;/Button&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>