CODEWITHSUNDEEP
reactjstypescript
Kerry
Kerry

Reputation: 454

How to make onChange event listener in declarative component?

This is the declarative component

export default function InputDialogContent(props: InputDialogContentProps) {

  const [textAreaValue, setTextAreaValue] = useState<string>("");

  return (
    <div>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label={props.inputLabel}
          type={props.inputType}
          fullWidth
        />
      </DialogContent>
    </div>
  );
}

I am using it in another component. What I want to do is I wanna alert something every time I type something inside the text area


    import InputDialogContent from './shared/InputDialogContent';
    
    export class SettingsMenu extends Component<
      SettingsMenuProps,
      SettingsMenuState
    > {
      constructor(props: SettingsMenuProps) {
        super(props);
        this.state = {
          settingsAnchorElement: null,
          currentDialog: null,
        };
      }
    
      render() {
         return (
            <InputDialogContent inputLabel="Email Address" 
             inputType="email" 
             onChange={(ev: React.ChangeEvent<HTMLTextAreaElement>): void => alert(ev.target.value)}/>
        )}

but I am getting the error when hovering on the onChange in the compiler. I know that the error occurs because the export component itself is not a textarea. Someone help, please

    {
        "message": "Type '{ inputLabel: string; inputType: string; onChange: (ev: ChangeEvent<HTMLTextAreaElement>) => void; }' is not assignable to type 'IntrinsicAttributes & InputDialogContentProps'.\n  Property 'onChange' does not exist on type 'IntrinsicAttributes & InputDialogContentProps'.",
    }

Upvotes: 2

Views: 163

Answers (2)

mousetail
mousetail

Reputation: 8010

Your component is missing the onChange event, you need to forward it to your text area:

export default function InputDialogContent(props: InputDialogContentProps) {

  const [textAreaValue, setTextAreaValue] = useState<string>("");

  return (
    <div>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label={props.inputLabel}
          type={props.inputType}
          onChange={props.onChange}
          fullWidth
        />
      </DialogContent>
    </div>
  );
}

Additionally, you need to make sure that InputDialogContentProps includes a property onChange of the appropriate type.

Upvotes: 1

Marcelo Viana
Marcelo Viana

Reputation: 314

It's not clear to me if you are controlling the TextField value inside the child component or you want to pass the value from its parent, but you could try this:

    <TextField
      autoFocus
      margin="dense"
      id="name"
      label={props.inputLabel}
      type={props.inputType}
      value={textAreaValue}
      onChange={ev=>{ setTextAreaValue(ev.target.value); props.onChange(ev); }}
      fullWidth
    />

Upvotes: 1

Related Questions