Props "Object is possibly 'undefined'" in React Typescript

Question

I am new to Typescript and I have an error I don't understand in React Typescript. I suspect that it comes from the way I write my interface but I am not sure.

First I call my CellEditable component

<CellEditable value={'Hello'} onChange={() => {}} />

CEllEditable has an isEditable state that toggles InputText on click

CellEditable.tsx

import React, { useState } from 'react'
import Cell from './Cell.comp'
import InputText from './InputText.comp'

interface CellEditableProps {
  value: string
  onChange?: () => void
}

const renderCellInput = (type: string, opts: any) => {
  switch (type) {
    case 'text':
      return <InputText {...opts} />
    default:
      return <div>Missing!</div>
  }
}

const CellEditable = (props: CellEditableProps) => {
  const { value, onChange } = props
  const [isEditing, setEditing] = useState<boolean>(false)

  const handleClick = () => setEditing(!isEditing)
  const handleBlur = () => setEditing(!isEditing)

  const opts = {
    value,
    helpers: {
      onBlur: handleBlur,
      onChange
    }
  }

  return (
    <div onClick={handleClick}>
      {
        isEditing
        ? renderCellInput('text', opts)
        : <Cell value={value} />
      }
    </div>
  )
}

export default CellEditable

InputText.tsx

import React from 'react'

interface InputTextProps {
  value?: string
  helpers?: HelpersProps
}

interface HelpersProps {
  onChange?: () => void
  onBlur?: () => void
}

const InputText = (props: InputTextProps) => {
  const { value, helpers } = props
  console.log('propsInputText:', props) // Empty object in the console
  
  return (
    <input type={'text'} value={value} onChange={helpers.onChange} onBlur={helpers.onBlur} />
  )
}

export default InputText

The issue is:

helpers.onChange gets this error "Object is possibly 'undefined'. TS2532"
console.log('propsInputText:', props) in InputText.tsx output an empty object.

Is it an issue with typescript and the way I write my interface?

Moving onChange and onBlur into InputTextProps and removing the helpers object seems to works. But 1) The issue doesn't happen in a CodeSandbox environment, only in my local react typescript environment 2) I would prefer to pass handlers into a container object in props 3) I want to better understand how TS interface and optional props work. — eakl
– eakl, Commented Jan 27, 2021 at 13:32
A previous answer that has been deleted suggested to test for the existence of OnChange and onBlur keys in the helpers object like so helpers!.onChange. How about destructuring the helpers props: const { value, helpers: { onChange, onBlur } } = props. I get the following error Property 'onChange' does not exist on type 'HelpersProps | undefined'.ts (2339) — eakl
– eakl, Commented Jan 27, 2021 at 13:39

fullstack · Accepted Answer · 2021-01-27 13:49:24Z

3

the helpers property in InputTextProps and the onChange property in your HelpersProps are optional. either make them required by removing the question mark or assign to them a default values when destructuing.

const { value, helpers = {} } = props;
const { onChange = () => {} } = helpers;

 return (
    <input type={'text'} value={value} onChange={onChange} onBlur={helpers.onBlur} />
  )

answered Jan 27, 2021 at 13:49

fullstack

8347 silver badges24 bronze badges

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

Comments

Shivam Jha · Accepted Answer · 2021-01-27 13:49:47Z

0

inside your interface:

interface CellEditableProps {
  value: string
  onChange?: () => void
}

you placed a ? after onChange, that tells the compiler that it can be not passed and hence you get "Object is possibly 'undefined'

To remedy this solution either you can use onChange with ! like onChange!. This thells compiler that you are sure that onChange will not be null. But this is a bad approach.

What you should do is check if it is not null or undefined and then proceed:

if(onChange) {
    ...do your stuff here
}

answered Jan 27, 2021 at 13:49

Shivam Jha

4,8184 gold badges26 silver badges38 bronze badges

Comments

Mr.Manhattan · Accepted Answer · 2021-01-27 13:52:46Z

0

your interface declaration clearly states that these can indeed be undefined (? marks these properties as optional). You'll need to check for their existance or fill them.

const value = props.value || '';
const helpers = {
   onChange: () => {},
   onBlur: () => {},
   ...(props.helpers || {}),
};

return (
    <input type={'text'} value={value} onChange={helpers.onChange} onBlur={helpers.onBlur} />
)

or similar.

answered Jan 27, 2021 at 13:52

Mr.Manhattan

5,5543 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Props "Object is possibly 'undefined'" in React Typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related