Failed prop type: Invalid prop `params` of type `object` supplied to `SignUp`, expected `array`

Question

I am getting this proptype validation error "Invalid prop" if I set it to receive array then It will show expected array but receive object and in other case same error expected function but receive object. In (signupData : PropTypes.object || PropTypes.array) this warning related to if I set PropTypes for only Object then error is " Invalid prop params of type object" and if set PropTypes for Array then error is " Invalid prop params of type object". any body have solution?

     import React,{PropTypes} from 'react';
     import { connect } from "react-redux";
     import * as AuthAction from "../../actions/authActions";
     import * as step2DataActions from "../../actions/step2DataActions";
     import update from 'react-addons-update';

 class SIGNUP extends React.Component{
 constructor(props){
      super(props);

 this.state = {
      teacherId:props.signupData.teacherId,
      data: props.signupData.step4.data,

      endTime: props.signupData.step4.endTime,
      head: props.signupData.step4.head,
      errorInput:'',
      errorField: '',
      valid: true,
      };
      }


      submitStepSignupForm(){
      let step3 = {single_classes:false,multiple_classes:true};
      let step4 =      {head:this.state.head,startTime:this.state.startTime,endTime:this.state.endTime,data:this.state.data};
      let submitData = {};
      submitData['teacher_id'] = this.state.teacherId;
      submitData['firstname'] = this.props.signupData.firstname;
      submitData['lastname'] = this.props.signupData.lastname;
      submitData['state'] = this.props.signupData.State;
      submitData['zipcode'] = this.props.signupData.zipcode;
      submitData['prefix'] = this.props.signupData.prefix;
      submitData['step2'] = this.props.step2Data;
      submitData['step3'] = step3;
      submitData['step4'] = step4;
      this.props.signupStep4(submitData);
      }
      closeModal(){
      this.props.scheduleData.dataExist = false;
      }

      render(){
      let tableStyle = {
           align:"center"
      };
      let list = this.state.data.map((p,index) =>{
           return (
                <tr className="grey2" key={index}>
                     {Object.keys(p).filter(k => k !== 'id').map(k => {
                           return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true"
                          value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>);
                     })}
                </tr>
           );
      });

      let startList = null;
      startList = this.state.startTime.map((obj,index)=>{
           let keyName = Object.keys(obj)[0];
           return(
                <td className="" key={index}><TimePicker start="08:00" end="18:00" step={1} name="C1StartTime" value={obj.StartTime} onChange={this.changeStartTime.bind(this,index,keyName)} /></td>
           );
      });

      let endList = null;
      endList = this.state.endTime.map((obj,index)=>{
           let keyName = Object.keys(obj)[0];
           return(
                <td className="" key={index}><TimePicker start="08:00" end="18:00" step={1} value={obj.EndTime} onChange={this.changeEndTime.bind(this,index,keyName)} /></td>
           );
      });

      let head = null;
      head = this.state.head.map((obj,index)=>{
           return (
                <td className="grey1" key={index}>{obj['class']}</td>
           );
      });


      return (
           <fieldset className="step-4">
                <div className="heading">
                     <h3>Tell us about your schedule</h3>
                     {/*<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>*/}
                </div>
                <div className="schedule table-responsive">
                     <table cellSpacing="3" id="mytable" style={tableStyle}>
                          <tbody>
                               <tr className="grey2" >
                                    {head}
                               </tr>
                               <tr className="grey2" >
                                    <td className="">Start Time</td>
                                    {startList}
                               </tr>
                               <tr className="grey2" >
                                    <td className="">End Time</td>
                                         {endList}
                               </tr>

                               {list}</tbody>
                     </table>
                     <p><a id="add_row" className="btn btn-default" onClick={this.appendColumn}>Add +</a>
                     <a id="add_row" className="btn btn-default" onClick={this.removeColumn}>Remove -</a>
                     <span className="inputError" >{this.state.errorInput}</span>
                     <span className="inputError" >{this.state.errorField}</span>
                </p>
                </div>
                <input type="button" name="previous" className="previous pre-btn action-button" value="Previous" />
                {(this.state.valid)?(<input type="submit" name="submit" className="submit1 action-button1" value="Submit" onClick={this.submitStepSignupForm.bind(this)}/>):(<input type="submit"  name="submit" className="disable-step4" value="Submit"  />)}
           </fieldset>
      );
      }
      }
      STEP4SIGNUP.propTypes = {
       signupData : PropTypes.object || PropTypes.array,
       getSchedule : PropTypes.object || PropTypes.array,
       step2Data : PropTypes.object || PropTypes.array,
       scheduleData : PropTypes.object || PropTypes.array,
       signupStep4 : PropTypes.func
      };
      const mapStateToProps = (state) => {
       return {
        user: state,
        step2Data: state.step2Data.step2Data,
        scheduleData: state.step2Data.scheduleData,
        step4Data: state.step4Reducer.step4
      };
     };
     const mapDispatchToProps = (dispatch) => {
      return {
           signupStep4: submitData =>       dispatch(AuthAction.signupStep4(submitData)),
           getSchedule: (teacher_id) => dispatch(step2DataActions.getSchedule(teacher_id)),
 };
 };

    export default connect(mapStateToProps,mapDispatchToProps)(STEP4SIGNUP);

Answer 1

when you write signupData : PropTypes.object || PropTypes.array you're basically saying

if(PropTypes.object){
   return PropTypes.object;
} else {
   return PropTypes.array;
}

in other words, since PropTypes.object will always evaluate to true you're declaring your prop as PropTypes.object all the time.

if you want to validate a prop against more than one type, use oneOfType

  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ])