TypeScript: Object is possibly 'null'

Question

I'm trying to convert a react project into TypeScript. The code below is an input field that counts how many characters that is being inputed.

In the renderCharactersLeft function I get the following error:

This doesn't really surprise me since the default state 'charsLeft' is set to null, but I wonder how you would bypass or solve this message in TypeScript?

import React from "react";

interface CharCountInputProps {
  value: string;
  type: string;
  name: string;
  maxChars: number;
  onChange: any;
}

interface CharCountInputState {}

class CharCountInput extends React.Component<
  CharCountInputProps,
  CharCountInputState
> {
  state = {
    charsLeft: null
  };

  componentDidMount() {
    this.handleCharCount(this.props.value);
  }

  handleCharCount = (value: string) => {
    console.log(value);
    const { maxChars } = this.props;
    const charCount = value.length;
    const charsLeft = maxChars - charCount;
    this.setState({ charsLeft });
  };

  changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ [event.target.name]: event.target.value } as Pick<
      CharCountInputState,
      keyof CharCountInputState
    >);
    this.handleCharCount(event.target.value);
    this.props.onChange(event);
  };

  renderCharactersLeft = () => {
    const { charsLeft } = this.state;

    let content;
    if (charsLeft >= 0) {
      content = <span>{`characters left: ${charsLeft}`}</span>;
    } else if (charsLeft != null && charsLeft < 0) {
      const string = charsLeft.toString().substring(1);
      content = <span>{`too many characters: ${string}`}</span>;
    } else {
      content = null;
    }
    return content;
  };

  render() {
    const { value, type, name } = this.props;

    return (
      <>
        <input
          onChange={this.changeHandler}
          value={value}
          type={type}
          name={name}
        />
        {this.renderCharactersLeft()}
      </>
    );
  }
}

export default CharCountInput;

Hmm yeah I tried that. Then I get the error on the next charsLeft after the && (charsLeft >= 0) — erikos93
– erikos93, Commented Dec 10, 2019 at 14:55
What's the reasoning behind the initial state of charsLeft being null? Would an initial state of 0 be more appropriate? — kschaer
– kschaer, Commented Dec 10, 2019 at 14:55
Is null required? can't you set it to this.props.maxChars initially? — Jai
– Jai, Commented Dec 10, 2019 at 14:56

Manaus · Accepted Answer · 2019-12-10 15:03:11Z

9

You could add a null check to your if-statement like this:

if (charsLeft !== null && charsLeft >= 0) {

or alternatively set the initial state for charsLeft to something other than null (ex. maxChars from your props)

edited Dec 10, 2019 at 15:03

answered Dec 10, 2019 at 14:55

Manaus

4055 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mickers Over a year ago

Change != to !== so you're checking the type and value. Unless you know what you're doing != should never be used.

erikos93 Over a year ago

Haha, it was too obvious for me to see it! Setting the initial state to my maxChars solved this issue. Thank you!

user1349544 · Accepted Answer · 2023-07-12 05:59:32Z

0

Another alternative is You can create local variable and assign the charLeft to it and use the local variable for compare.

let newVariable = charLeft;
if(newVariable > 0) {
  //do coding
}

answered Jul 12, 2023 at 5:59

user1349544

637 bronze badges

Collectives™ on Stack Overflow

TypeScript: Object is possibly 'null'

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related