反应：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

Question

I am learning React and I faced this error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I've checked all the previous questions related to similar errors but can't find out what's wrong. Here is my code:

import React from 'react'
import classes from './BuildControls.css'
import BuildControl from './BuildControl/BuildControl.css'

const controls = [
    {label: 'Salad',type: 'salad'},
    {label: 'Bacon',type: 'bacon'},
    {label: 'Cheese',type: 'cheese'},
    {label: 'Meat',type: 'meat'},
];

const buildControls = (props) => (
    <div className={classes.buildControls}>
        {controls.map(ctrl => (
            <BuildControl 
                key={ctrl.label} 
                label={ctrl.label}
                added={() => props.ingredientAdded(ctrl.type)}
                 />
        ))}       
    </div>
);

export default buildControls;

this is the file which contains error. Thanks in advance

Answer 1

You are importing the BuildControl stylesheet as BuildControl and trying to use that to create the BuildControl element. You need to instead import BuildControl from './BuildControl/BuildControl.jsx' (assuming that's your component's filename and location).

To render a child component inside a parent component, you need to import the child component's JS file.

As a side note, it's common practice to always use pascal case (eg, "BuildControls") when naming components.