reactjs - 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:

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

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

question from:https://stackoverflow.com/questions/65920094/props-object-is-possibly-undefined-in-react-typescript

Answer 1

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} />
  )