Search code examples
reactjsinputreact-propsmaxlength

ReactJS input type = "text" maxLength is not working when passed as props


I am trying to pass maxLength as props to but it is not working. Can anyone helps out? Thank you!

Following is the two component:

 <Input
        id="creategroup-group-and-description-textfield"
        value={value}
        type="text"
        multiline={this.props.multiline}
        rowsMax={this.props.rowsMax}
        maxLength={this.props.maxLength}
        onChange={this.handleInputChange}
        placeholder={this.props.placeholder}
      />



     <TextFieldWithTitle
          title="Group Name"
          maxLength={3}
          multiline={false}
          placeholder="e.g.Study and Workout"
        />

Solution

  • I finally figured out the answer and decided put it here for the people who may have the same question in the future :)

    Answer: if you want to pass maxLength as a props in React. You should use:

    inputprops = {{maxLength = num}} (note: num can be any positive num you want. No {} and "" needed.
    

    Then, in the place that receives this props, write:

    inputprops = {this.props.inputprops} 
    

    To limit the input length, write:

    <Input 
    inputprops={{maxLength: 100(e.g.)}}
    />
    

    NOTE: Inputprops and inputprops are two different things in React. Be careful.