React.createElement：使用array.map無國籍組件內部時類型無效

Question

我有以下部件：

import React from "react"; 
import { Grid, Form } from "semantic-ui-react"; 

const BasicDetail = ({DetailData}) => { 
    return(
     <div> 
      <Grid.Row> 
       <h3>Basic Details</h3> 
       {DetailData.map((form) => { 
        return (
         <Form.input 
          label={form.label} 
          readOnly={true} 
          defaultValue={form.default} 
          type="text" 
         /> 
        ) 
       })} 
      </Grid.Row> 
     </div> 
    ) 
} 

BasicDetail.propTypes = { 
    DetailData: React.PropTypes.array.isRequired 
}; 

export default BasicDetail; 

我傳遞它在道具對象的數組，但我得到下面的錯誤：

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of BasicDetail .

如果我從組件移除.MAP功能它正確地呈現。

這個錯誤的原因是什麼？

Answer 1

Semantic UI React組件名稱以大寫字母開頭。
使用Form.Input而不是Form.input。