jsmanifest

const callAll = (...fns) => (arg) => fns.forEach((fn) => fn && fn(arg))

function MyInput({ value, onChange, onChange2, onChange3 }) {
  return (
    <input
      type='text'
      value={value}
      onChange={callAll(onChange, onChange2, onChang3)}
    />
  )

jsmanifest

function App() {
  const [value, setValue] = React.useState('')
  
  function onChange(e, { ref }) {
    // ERROR --> e is actually the { ref } object so e.target is undefined
    setValue(e.target.value)
  }
  
  return (
    <div>

jsmanifest

function MyInput({ value, onChange: onChangeProp }) {
  const ref = React.useRef()
  
  function onChange(e) {
    if (isDigits(e.target.value) && isWithin6(e.target.value)) {
      onChangeProp(e, { ref: ref.current })
    }
  }
  
  return (

jsmanifest

function MyInput({ value, onChange: onChangeProp }) {
  function onChange(e) {
    if (isDigits(e.target.value) && isWithin6(e.target.value)) {
      onChangeProp(e)
    }
  }
  
  return (
    <div>
      <input type='text' value={value} onChange={onChange} />

jsmanifest

function App() {
  const [value, setValue] = React.useState('')
  
  function onChange(e) {
    setValue(e.target.value)
  }
  
  return <MyInput value={value} onChange={onChange} />
}

jsmanifest

function isDigits(value) {
  return /^\d+$/.test(value)
}

function isWithin6(value) {
  return value.length <= 6
}

function MyInput({ value, onChange: onChangeProp }) {
  function onChange(e) {

jsmanifest

function MyInput({ value, onChange: onChangeProp }) {
  function onChange(e) {
    onChangeProp(e)
  }
  return (
    <div>
      <input type='text' value={value} onChange={onChange} />
    </div>
  )
}

jsmanifest

function App() {
  const [value, setValue] = React.useState('')
  function onChange(e) {
    setValue(e.target.value)
  }
  return <MyInput value={value} onChange={onChange} />
}

jsmanifest

import React from 'react'
import MyInput from './MyInput'

function App() {
  const [value, setValue] = React.useState('')
  return <MyInput value={value} />
}

export default App

jsmanifest

import React from 'react'
import './styles.css'

function MyInput() {
  const [value, setValue] = React.useState('')
  function onChange(e) {
    setValue(e.target.value)
  }
  return (
    <div>