Binding element 'message' implicitly has an 'any' type

March 18, 2023

i want to pass information from parent to son, but i get error: Binding element ‘message’ implicitly has an ‘any’ type. What to do? Please help my code:

const Forms = () => {
    const [messageText, setMessageText] = useState("");

    useEffect(() => {
        API.getPosts()
        const handleMessage = () => {
            setMessageText("lox");
        }
    }, [])

    return (
        <div>
            <div style={{alignItems: "center", justifyContent: "center", textAlign: "center"}}>
                <Form message={messageText}/>
                <Form message={messageText}/>
            </div>

        </div>
    );
};

export default Forms;

Son

const Form = ({message}) => {
    return (
        <div>
                <div className={form.form}>
                <h2 className={form.text}>{message}</h2>
                    <p>Автор: <span style={{textDecoration: "underline"}}>Author</span></p>
                </div>

        </div>
    );
};

export default Form;

>Solution :

To fix this error, you can define the type of the message variable like the code below:

const Form = ({ message }: { message: string }) => {
  return (
    <div>
      <div className={form.form}>
        <h2 className={form.text}>{message}</h2>
        <p>
          Автор: <span style={{ textDecoration: "underline" }}>Author</span>
        </p>
      </div>
    </div>
  );
};

export default Form;

you could use the any type explicitly if you don’t know the type of the message variable, like so: { message }: { message: any}.
However, using any should be avoided if possible because it undermines the benefits of using TypeScript.