CODEWITHSUNDEEP
reactjsinputreact-propsmaxlength
jazhuang
jazhuang

Reputation: 21

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"
        />

Upvotes: 0

Views: 1423

Answers (1)

jazhuang
jazhuang

Reputation: 21

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.

Upvotes: 1

Related Questions