Theo's Typesafe Cult•2y ago

Hello everyone, I may need some of your front-end expertise on this one.

I'm building a form with different inputs and a button. The inputs are custom React components. As shown in the picture. And I am trying to handle state in the corresponding parent component without any 3rd party library. My attempt to handle state in custom React input components failed with the error in the picture (Unhandled Runtime Error TypeError: onEdit is not a function). Does any one know what I'm doing wrong.

8 Replies

sumatoken•2y ago

barry•2y ago

Well the problem isn't the type Can you show where you actually passed this onEdit Typescript doesn't throw runtime errors So it's basically saying, there's no onEdit being passed, something is going wrong there

sumatoken•2y ago

onEdit is passed as a prop in a parent component

nexxel•2y ago

don't pass a callback to a callback just put onChange={onEdit} see if it works

sumatoken•2y ago

it triggers a type error. Plus I need to pass the event object to the onEdit function

Grey•2y ago

here's how I handle state changes in parent components without any fancier state management, Suppose I have an input component as so :

export interface InputProps {
  type?: string;
  value: any;
  placeholder?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  onInput?: ChangeEventHandler<HTMLInputElement>;
  maxLength?: number;
  max?: number;
}

const Input = (props: InputProps) => {
  return (
    <input
      className={clsx(
        "tailwind classes..."
      )}
      type={props.type ?? "text"}
      value={props.value}
      maxLength={props.maxLength ?? 40}
      placeholder={props.placeholder}
      max={props.max}
      onChange={props.onChange}
      onInput={props.onInput}
    />
  );
};

export interface InputProps {
  type?: string;
  value: any;
  placeholder?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  onInput?: ChangeEventHandler<HTMLInputElement>;
  maxLength?: number;
  max?: number;
}

const Input = (props: InputProps) => {
  return (
    <input
      className={clsx(
        "tailwind classes..."
      )}
      type={props.type ?? "text"}
      value={props.value}
      maxLength={props.maxLength ?? 40}
      placeholder={props.placeholder}
      max={props.max}
      onChange={props.onChange}
      onInput={props.onInput}
    />
  );
};

and in the parent

// import it in another file
import { Input } from '@ui/input';

const ParentComponentOrPage  = () => {

  const [count, setCount] = useState<number>(0);

  return (
      {/* ... components */}
      <div className="flex flex-col">
         <label>Count of foobar</label>
          <Input
              value={count}
              onChange={(e) => setCount(parseInt(e.target.value))}
              type={"number"}
              maxLength={message.length}
            />
      </div>    
      {/* ... components */}
  );

}

// import it in another file
import { Input } from '@ui/input';

const ParentComponentOrPage  = () => {

  const [count, setCount] = useState<number>(0);

  return (
      {/* ... components */}
      <div className="flex flex-col">
         <label>Count of foobar</label>
          <Input
              value={count}
              onChange={(e) => setCount(parseInt(e.target.value))}
              type={"number"}
              maxLength={message.length}
            />
      </div>    
      {/* ... components */}
  );

}

sumatoken•2y ago

Thank you so much. I just needed to change the onEdit prop type and call it directly without using a callback just like the way you implemented it.

Grey•2y ago

no problem 👋

Gaming

Programming

Hello everyone, I may need some of your front-end expertise on this one.