Scalajs-react: Uncaught TypeError: Cannot read properties of null (reading 'value')

Question

I have following code for my scalajs-react application:

def render(person: Person) = {
    <.div(
      <.p("Welcome!"),
      <.form(
        <.label("Name:",
          <.input(^.`type` := "text", ^.cls := "form-control",
            ^.value := person.name, ^.onChange ==> updatePersonName
          )
      ))
    )
  }

  def updatePersonName(event: ReactEventFromInput): Callback = {
    $.modState(person => person.copy(name = event.target.value))
  }

But I see error:

Uncaught TypeError: Cannot read properties of null (reading 'value')

What am I missing here?

Answer 1

you have use event.extract

Doc says:

If you want to access the event properties in an asynchronous way (eg. in a modState(…) function)

Therefore your updatePersonName function should look:

def updatePersonName(event: ReactEventFromInput): CallbackTo[Unit] = {
  event.extract(_.target.value)(text =>
    $.modState(person => person.copy(name = text))
  )
}