How to get character count limitation including default name-Reactjs

Question

I am trying to get character limit for input box ,but the input field has default value.

if character limit exceeds text has to appear at 0 limit(Not popup)

if i use below code it is not working fine for my requirement(say default value already exist).

can I know how to include default value and set message if it come to 0

class Company extends React.Component {
state = {
      Title: this.props.selectedTable.Title,
      chars_left: 50,
      max_char:50
    }

   handleCharacterCount= (event) => {
    const charCount = event.target.value.length;
    const maxChar = this.state.max_char;
    const charLength = maxChar - charCount;
    this.setState({ chars_left: charLength });
    //this.setState({sTitle: e.target.value});
   }
   render() {
    return (
     <div>
      <textArea
        type="text"
        maxLength="50"
        required
        onChange={this.handleCharacterCount}
        value={this.state.Title}/>
      />
      <p>{this.state.chars_left}</p>
    </div>
  )
 }
}

`onChange` will only fire when you click off of the textarea. If you want immediate updates use `onInput`. — Joseph Webber, Jun 08 '18 at 18:46

Md Isfar Uddin · Accepted Answer · 2018-06-08T20:35:49.647

1

You can try this

state = {
  Title: this.props.selectedTable.Title,
  chars_left: 50 - this.props.selectedTable.Title.length,
  max_char:50
}



handleCharacterCount= (event) => {
const charCount = event.target.value.length;
const maxChar = this.state.max_char;
const charLength = maxChar - charCount;
this.setState({ chars_left: charLength,Title: event.target.value })}



render() {
return (
 <div>
  <textArea
    type="text"
    maxLength="50"
    required
    onChange={this.handleCharacterCount}
    value={this.state.Title}/>
  />
  {
    !this.state.chars_left &&
      <p>text has to appear at 0 limit</p>
  }
  <p>{this.state.chars_left}</p>
</div>)}

edited Jun 08 '18 at 20:35

answered Jun 08 '18 at 19:14

Md Isfar Uddin

692
11
19

sure let me check – R9102 Jun 08 '18 at 19:49
but i need to check the default value characters also – R9102 Jun 08 '18 at 19:50
don't get it. please explain. Do you want to count default value characters also? – Md Isfar Uddin Jun 08 '18 at 19:56
I mean , i have default values which appears in the text box, will this also be counted – R9102 Jun 08 '18 at 19:57
if there is 50 max character, i have default name already exist-----if default name is 'XYZ' there my count should be 47 – R9102 Jun 08 '18 at 20:07
in the state add it. chars_left: 50 - this.props.selectedTable.Title.length – Md Isfar Uddin Jun 08 '18 at 20:18
commented the line in my question... is that ok – R9102 Jun 08 '18 at 20:19
chars_left: 50 - this.props.selectedTable.Title.length......... this should be worked. Do you want that? – Md Isfar Uddin Jun 08 '18 at 20:22
I edited my answer. Now you can see the code what you want actually – Md Isfar Uddin Jun 08 '18 at 20:37
i need to set message based on api response,it should say 'data saved successfully' only if its 200 status, can i get some suggestions – R9102 Jun 08 '18 at 21:41
Where do you want to set that message? Can you try it: if(response.status===200) { this.setState({message:'Data saved successfully'})} – Md Isfar Uddin Jun 09 '18 at 04:04
Should i set in action page itself?? – R9102 Jun 09 '18 at 05:52
at component level how do we get to know response status?? – R9102 Jun 09 '18 at 11:14
When you get your api response, then you can set a state object according to the response.status. If the state object is true then you can show the message or hide. Let me know if you get it or not – Md Isfar Uddin Jun 09 '18 at 15:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172813/discussion-between-jmr-and-md-isfar-uddin-alnur). – R9102 Jun 09 '18 at 15:55
Should i maintain any redux state or from network tab. – R9102 Jun 09 '18 at 16:11
isfar Uddin AINur can you please look into this issue https://stackoverflow.com/questions/50776961/how-to-remove-board-from-redux-store-react-js-redux – R9102 Jun 09 '18 at 18:04

How to get character count limitation including default name-Reactjs

1 Answers1