so you see the code here its working fine. But there is error that prevents be from building it. check the code

im trying to assign onChange to onChange so when user press a key it will show up in the text field. Currently using onChange={onChange} it works in browser and for run dev but wont build. And when I find any solution/change whats its equal to the browser breaks or stops accepting text input. Very frustrating this is last thing I need to deploy app.

import {useState} from 'react'



type Props = {
  label: string
  placeholder?: string
  onChange: (e?: Event) => void
  name?: string
  value?:  any
  
}

export const TextField = ({ label, onChange, placeholder, name, value }: Props) => {
  const [inputs, setInputs] = useState({})
  const handleChange = (event: any) => {
    const name = event.target.name
    const value = event.target.value
    setInputs(values => ({...values, [name]: value}))
  }
  const handleSubmit = (event: any) => {
    event.preventDefault()
    console.log(inputs)
  }
  return (
    <div style={{width:'100%'}}>
      <div className='text-sm my-2'>{label}</div> 
      <input
        className='border-blue-200 border-2 rounded focus:ring-blue-200 focus:border-blue-200 focus:outline-none px-2'
        style={{ height: '45px', maxWidth: '280px', width: '100%', backgroundColor: '#0D0D0D' }}
        placeholder={placeholder}
        onChange={onChange}
        name={name}
        value={value}
       

      />
    </div>
  )
}

and there is following error

[{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '(e?: Event | undefined) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.\n  Types of parameters 'e' and 'event' are incompatible.\n    Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'Event': cancelBubble, composed, returnValue, srcElement, and 7 more.",
    "source": "ts",
    "startLineNumber": 33,
    "startColumn": 9,
    "endLineNumber": 33,
    "endColumn": 17,
    "relatedInformation": [
        {
            "startLineNumber": 2254,
            "startColumn": 9,
            "endLineNumber": 2254,
            "endColumn": 17,
            "message": "The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'",
            "resource": "/d:/dropship/node_modules/@types/react/index.d.ts"
        }
    ]
},{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "6133",
    "severity": 4,
    "message": "'handleChange' is declared but its value is never read.",
    "source": "ts",
    "startLineNumber": 17,
    "startColumn": 9,
    "endLineNumber": 17,
    "endColumn": 21,
    "tags": [
        1
    ]
},{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "6133",
    "severity": 4,
    "message": "'handleSubmit' is declared but its value is never read.",
    "source": "ts",
    "startLineNumber": 22,
    "startColumn": 9,
    "endLineNumber": 22,
    "endColumn": 21,
    "tags": [
        1
    ]
}]

i have tried many changes but I cannot get this error to go away. If anyone is react expert will be greatly appreciated.

CodePudding user response：

Try like this !

onChange={handleChange}

CodePudding user response：

From your error message, I would suggest this

• Remove handleSubmit if you are not using it
• Change onChange: (e: ChangeEvent<HTMLInputElement>) => void
• Remove handleChange

I do not know why you defined the handleSubmit function and handleChange function for, But I hope this helps.

import { ChangeEvent, useState } from "react";

type Props = {
  label: string;
  placeholder?: string;
  onChange: (e: ChangeEvent) => void;
  name?: string;
  value?: any;
};

export const TextField = ({
  label,
  onChange,
  placeholder,
  name,
  value,
}: Props) => {
  const [inputs, setInputs] = useState({});
  const handleChange = (event: any) => {
    const targetName = event.target.name;
    const targetValue = event.target.value;
    setInputs((values) => ({ ...values, [targetName]: targetValue }));
    onChange(event);
  };
  const handleSubmit = (event: any) => {
    event.preventDefault();
    console.log(inputs);
  };
  return (
    <div style={{ width: "100%" }}>
      <div className="text-sm my-2">{label}</div>
      <input
        className="border-blue-200 border-2 rounded focus:ring-blue-200 focus:border-blue-200 focus:outline-none px-2"
        style={{
          height: "45px",
          maxWidth: "280px",
          width: "100%",
          backgroundColor: "#0D0D0D",
        }}
        placeholder={placeholder}
        onChange={handleChange}
        name={name}
        value={value}
      />
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>