如何在React中获取子组件数据

Question

这是我从父组件到子组件的数据流

父组件

    import Add from './AddPage'; //addpage.jsx

    ......

    let data =  
      [
        { id: 0, name: 'orange' },
        { id: 1, name: 'purple' },
        { id: 2, name: 'red' },
        { id: 3, name: 'blue' },
      ];

    .......

    <Add data= { data } /> 

子组件

如何在子组件中获取数据，我尝试了以下方法

const Child = ({ data }) => (
  data.map((value => value.name))
);  

当我使用{Child}时，显示

  

未捕获的ReferenceError：未定义Chid

---

修改

在我的AddForm中使用

let AddForm = props => {
  const { handleSubmit } = this.props

  return(
    <div className="form-row">
      <div className="col-md-12">
        <form onSubmit={handleSubmit(onSubmit)}>
          <Field
            name="colors"
            component={renderMultiselect}
            data={Child}
            valueField="id"
            textField="name"
            label="Colors"          
          />
          <button type="submit">Submit</button>
        </form>{/* form end*/}
      </div>{/* col-md-6f*/}
    </div>/*main row*/
  );
}

在Multiselect valueField中使用

数据