React can't pass props to component

Question

I can't pass props to my child component from App.tsx and I can't figure out why. I've looked online for 2 hours and yet no working solution. Does anyone know what the problem is? It gives me the following error as well:

"No overload matches this call. Overload 1 of 2, '(props: Readonly): CartView', gave the following error. Type '{ phrase: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. Property 'phrase' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. Overload 2 of 2, '(props: Props, context?: any): CartView', gave the following error. Type '{ phrase: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. Property 'phrase' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.ts(2769)"

Component

import React, { Component } from 'react';

class CartView extends Component<Props, State>{
    render(){
        return(
            <div>
                <p>{this.props.phrase}</p> <--- This doesn't work. It only autofills to use this.props.children.
            </div>
        )
    }
}

export default CartView;

App.tsx

import React from 'react';
import CartView from './components/cart/Cart';

type Props = {};
type State = {};

function App() {
  return (
    <div className="App">
      <CartView phrase="Hello"/>
    </div>
  );
}

export default App;

Anup Anup · Accepted Answer · 2020-09-02T18:22:07

You have used the Props and State interface for your component Cartview

import React, { Component } from 'react';

// Create Interface 
interface Props {
    phrase: string
}

class CartView extends Component<Props, {}>{
    // add a constructor 
    constructor(props: Props) {
        super(props);
    }
    render() {
        return (
            <div>
                <p>{this.props.phrase}</p> 
            </div>
        )
    }
}

export default CartView;

React can't pass props to component

1 Answers