尝试渲染反应组件时，未定义“名称框”反应/jsx-no-undef 错误

Question

I'm learning react and I'm stuck on this issue. All I want to do is to render a component which resides in the current Class. When I run this code I'm getting an error .

This is the Code.

class NamesBox extends React.Component{

    constructor(){
        super();
    }

    Namebox(props){
        return(
          <div>
             <div>{props.name}</div>
           </div>
        );
    }

    sayHello() {
        let names = ["joseph",'john','megha','nadhiya'];
        return names.map(name => {
            return (
            <Namebox name={name} key={name}/>
            );
        })
    }


    render (){
        return (this.sayHello());
    }

};

export default NamesBox;

Failed to compile ./src/NamesBox.js Line 21:5: 'Namebox' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

Answer 1

namebox is a function not a component. You are trying to invoke it inside the sayHello function as a component. Try this.namebox(name) instead. You are not suppose to create a component within a component so namebox is just a function and it should start with a lower case letter.