Cannot find name 'Props'

React
1

I am getting this error Cannot find name ‘Props’

import { ReactElement, JSXElementConstructor, ReactFragment, useState } from "react";

interface ListGroupProps{
    items: string[];
    heading: string;
}

function ListGroup(ListGroupProps:Props){

       //items = [];
    items.map(item => <li>{item}</li>)

    //const message = items.length === 0 ? <h4>No items found :)</h4> : null;
    const getMessage = (NoOfItems: number) => {
        return items.length === 0 ? <h4>No items found :(</h4> : <h4>{NoOfItems} items found :)</h4>;
    }

    //Hook
    const [selectedIndex, setSelectedIndex] = useState(-1);
    
    

    return (<>
        <h1>Header here....</h1>
        {getMessage(items.length)}
        <ul className="list-group">
            {
                items.map((item, index) => (
                    <li 
                        key={item} 
                        className={selectedIndex === index ? 'list-group-item active' : 'list-group-item'}
                        onClick={() => { setSelectedIndex(index) }}>
                            {item}
                    </li>
                ))
            }   
        </ul>
    </>);
}

export default ListGroup;
2

You called the interface for the properties ListGroupProps so that will be the type of your parameter and it’s declared behind the colon while the parameter name is declared in front of the colon. And by convention it should be in camelCase:

function ListGroup(props: ListGroupProps)

Of course you will have to make further changes since your code still refers to the items array instead of using the passed props.

If you type along with Mosh I’d suggest you first watch the video to the end and apply what you learned to your source codes.

3

Thank you, got it now.