patterntypescriptreactCritical

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

assignableintrinsicattributestypeintrinsicclassattributesnot

Problem

i am currently making a simple react application.
this is my index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  ,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

and here I have my app.tsx

import * as React from 'react';
import SearchBar from '../containers/price_search_bar';

interface Props {
  term: string;
}

class App extends React.Component {

  // tslint:disable-next-line:typedef
  constructor(props) {
    super(props);
    this.state = {term: '' };
  }

  render() {
    return (
      
        
          Welcome to React
        
        
          this is my application.
        
        
            
            
            
        
      
    );
  }
}

export default App;

and also my search bar container:

import * as React from 'react';

interface Props {
    term: string;
}

// tslint:disable-next-line:no-any
class SearchBar extends  React.Component {

    // tslint:disable-next-line:typedef
    constructor(props) {
        super(props);
        this.state = { term: '' };
    }

    public render() {
        return(
            
                
                
                    
                        Submit
                    
                

            
        );
    }
}

export default SearchBar;

and finally I have my tsconfig.json:

```
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"node_modules/@types"
]

Solution

I solved a lot of "not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes" type of errors (Microsoft closed issue) just by declaring an object that is passed entirely to the component.

With the OP's example, instead of using term={this.props.term}, use {...searchBarProps} to get it working:

render() {
  const searchBarProps = { // make sure all required component's inputs/Props keys&types match
    term: this.props.term
  }
  return (
    
      ...
      
          
          
          
      
    
  );
}

Code Snippets

render() {
  const searchBarProps = { // make sure all required component's inputs/Props keys&types match
    term: this.props.term
  }
  return (
    <div className="App">
      ...
      <div>
          <form>
          <SearchBar {...searchBarProps} />
          </form>
      </div>
    </div>
  );
}

Context

Stack Overflow Q#48240449, score: 229

Revisions (0)

No revisions yet.