Binding element ‘#’ implicitly has an ‘any’ type in React – How to fix it?

This article will show you how to fix the error “Binding element ‘#’ implicitly has an ‘any’ type” in React by defining the type of props or passing props directly to an object. Let’s go into detail now.

What causes the error “Binding element ‘#’ implicitly has an ‘any’ type” in React?

Before getting to the ways to fix the error, we first come to the reason for the error. The code below will show you one case where this error occurs.

Code:

const App = (props) => {
      const { id,name,email } = props;
 
      return (
        <>
         <h2>Binding element '#' implicitly has an 'any' type in React</h2>
         <hr/>
          <h3>Id: {id}</h3>
          <h3>Name: {name}</h3>
          <h3>Email: {email}</h3>
        </>
      );
    };
export default App;

Output:

Here the error occurs when your props only have a name defined, not the data type of the props inside. When you run the project, the TypeScript will recognize it and ask you to add a type.

How to fix this error?

Define the type of props method

This way, we will use the method to define data types for each value in the props we need to pass. And this definition is usually placed at the beginning of the code to keep the code clear.

Code:

type UserProps = {
    id: number;
    name: string;
    email: string;
  };
 
  const User: React.FunctionComponent<UserProps> = (props) => {
    const { id,name,email } = props;
 
    return (
      <div>
        <h2>Binding element '#' implicitly has an 'any' type in React</h2>
        <hr/>
        <h3>Id: {id}</h3>
        <h3>Name: {name}</h3>
        <h3>Email: {email}</h3>
      </div>
    );
  };
 
  function App() {
    return (
      <div className="App">
        <User {...{ id:1,name: "Tom", email:"[email protected]" }} />
      </div>
    );
  }
 
  export default App;

Output:

You will define User as a React.FunctionComponent and pass it within as User Props. You will define props and their data types first. For example, the id is numeric. The name is a string. This way, we can pass props down without any errors.

Pass props directly to object

This way, we won’t need to define the component and pass props through two more steps but will pass the props directly into the component’s parameter.

Code:

type UserProps = {
    id: Number;
    name: string;
    email: string;
  };
 
  const User = (props: UserProps) => {
    const { id,name, email} = props;
 
    return (
      <div>
        <h2>Binding element '#' implicitly has an 'any' type in React</h2>
        <hr/>
        <h3>Id: {id}</h3>
        <h3>Name: {name}</h3>
        <h3>Email: {email}</h3>
      </div>
    );
  };
 
  function App() {
    return (
      <div className="App">
        <User {...{ id:1,name: "Tom", email:"[email protected]" }} />
      </div>
    );
  }
 
  export default App;

As you can see, these two methods return the same result, so we were able to prevent the warning.

Summary

In summary, you can prevent the error “Binding element ‘#’ implicitly has an ‘any’ type” in React through two ways mentioned in the article. We encourage you to define the type of props because it will comprehensively fix errors. Good luck for you.

Maybe you are interested:

• Parameter ‘event’ implicitly has ‘any’ type in React
• Property does not exist on type ‘never’ in React
• Property does not exist on type ‘JSX.IntrinsicElements’

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs