Component TSX gives Type error Property 'onChange' is missing in type '{ key: string; value: Model; }' but required in Props

Issue

I run:

npm run build

Please help me resolve the error I get:

/components/Lane.tsx:37:18
Type error: Property 'onChange' is missing in type '{ key: string; value: StepModel; }' but required in type 'StepProps'.

My /components/Step.tsx looks like:

import styles from '../styles/Step.module.css'
import StepModel from "../model/step"
import Presente from "./Present"
import Button from '@mui/material/Button'

interface StepProps {
    value: StepModel
    onChange: (newStep: StepModel) => void
}

export default function Step(props: StepProps) {

    const step  = props.value
    const selected = step.selected
    const changeSelection = e => props.onChange(step.alternarSelecao())  
    const abrir = e => {
        e.stopPropagation()
        props.onChange(step.abrir())
    }

    function renderSteps(){

        return (           
            <div className={styles.step}>
                {step.value}
            </div>
        )
    }


    return (
            <div className={styles.area}>
                <div className={`${styles.letter} ${selected}`}>
                    {step.value ? 
                        renderSteps(): 
                        step.selected ? <Button>{step.value}</Button>: false
                    }
                </div>
            </div>

    )

}

My /model/step.ts looks like:

export default class StepModel { #id: number #value: string #selected: boolean

constructor(id: number, value: string, selected: boolean) {
    this.#id = id
    this.#value = value
    this.#selected = selected
}

static active(id:number, value: string) {
    return new StepModel(id, value, true)
}

static inactive(id:number, value: string) {
    return new StepModel(id, value, false)
}

get id() {
    return this.#id
}

get value() {
    return this.#value
}

get selected() {
    return this.#selected
}

alternarSelecao() {
    const selecionada = !this.selected
    return new StepModel(this.id, this.value, this.selected)
}

abrir() {
    const aberta = true
    return new StepModel(this.id, this.value, this.selected)
}

static criarUsandoObjeto(obj: StepModel): StepModel {
    return new StepModel(obj.id, obj.value, obj.selected)
}

paraObjeto() {
    return {
        id: this.#id,
        value: this.#value,
        selected: this.#selected
    }
}

}

My /components/Lane.tsx looks like:

import styles from '../styles/Lane.module.css'
import LaneModel from '../model/lane'
import Step from './Step'
import * as React from 'react'
import "@emotion/styled"

interface LaneProps {
    value: LaneModel
    onChange: (newLane: LaneModel) => void
}

export default function Lane(props: LaneProps) {
    const lane = props.value
    const selected = lane.selected
    const changeSelection = e => props.onChange(lane.alternarSelecao())  
    const abrir = e => {
        e.stopPropagation()
        props.onChange(lane.abrir())
    }

    function renderSteps() {
  
        return lane.steps.map((step, i) => {

            return (
                <Step
                    key={`${step.id}-${i}`} value={step}

                 />
            )
        })
        
    }

    return (
        <div className={styles.lane} onClick={changeSelection}>
            {lane.id}
            {lane.description}
            {renderSteps()} 
        </div>
    )
}

My /model/lane.ts looks like:

import StepModel from "./step"

export default class LaneModel {
    #id: number
    #description: string
    #steps: StepModel[]
    #selected: boolean

    constructor(id: number, description: string, steps: StepModel[],selected = false) {
        this.#id = id
        this.#description = description
        this.#steps = steps
        this.#selected = selected
    }

    static active(id: number, description: string, steps: StepModel[], selected = false) {
        return new LaneModel(id, description, steps, selected )  
    }
    
    static inactive(id: number, description: string, steps: StepModel[], selected = false) {
        return new LaneModel(id, description, steps, selected ) 
    }

    desselected() {
        const selected = false
        return new LaneModel(this.id, this.description, this.steps, this.selected )        
    }

    alternarSelecao() {
        const selected = !this.selected
        return new LaneModel(this.id, this.description, this.steps,  this.selected )
    }

    abrir() {
        const aberta = true
        return new LaneModel(this.id, this.description, this.steps, this.selected )
    }

    get id() {
        return this.#id
    }
    
    get description() {
        return this.#description
    }

    get steps() {
        return this.#steps
    }
    
    get selected() {
        return this.#selected
    }

    static criarUsandoObjeto(obj: LaneModel): LaneModel {
        const steps = obj.steps.map(step => StepModel.criarUsandoObjeto(step))
        return new LaneModel(obj.id, obj.description, steps, obj.selected)
    }
    
    embaralharRespostas(): LaneModel {
        let respostasEmbaralhadas = (this.#steps)
        return new LaneModel(this.#id, this.#description, respostasEmbaralhadas, this.#selected)
    }

    paraObjeto() {
        return {
            id: this.#id,
            description: this.#description,
            steps: this.#steps ? (this.#steps.map(step => step.paraObjeto())): null,
            selected: this.#selected,
        }
    }
}

My index.js looks like:

import Lane from '../../components/Lane'
import LaneModel from '../../model/lane'
import StepModel from '../../model/step'

export default function Home() {

    const l1 = new LaneModel(400,"Health", [
        StepModel.inactive(700, "Imports Data"),
        StepModel.inactive(701, "Cleans Data"),
        StepModel.inactive(702, "Creates Notebook"),
        StepModel.active(703, "Trains Model")
    ], true)

  return(
    <div style={{display: "flex"}}>   <Lane value={l1}  />
    </div>

  ) 
}

Solution

interface StepProps {
  value: StepModel
  onChange: (newStep: StepModel) => void
}

This type specifies that onChange is a mandatory prop, which must be provided to Step. And yet, when you render it, you're not passing an onChange prop in:

<Step key={`${step.id}-${i}`} value={step} />

Either pass in an onChange prop:

<Step 
  key={`${step.id}-${i}`} 
  value={step} 
  onChange={(newStep) => /* do whatever */}
/>

Or make the prop optional:

interface StepProps {
  value: StepModel
  onChange?: (newStep: StepModel) => void
}

Answered By - Nicholas Tower