Objects are not valid as a React child (found: object with keys {..}). …..use an array instead. in Select (created by Context.Consumer)

This is what my data (clientsResponse) looks like:

[{"id":1,"description":"CORPORATE","en":"Corprorate","gr":"Εταιρία","type":"ASSET"},{"id":2,"description":null,"en":"Property","gr":"Περιουσίας","type":"ASSET"}]

I have the following snippet of code:

//populate data
      fetchAllLos() {
        let that = this;
        this.props.losStore.getAllLos().then(function (clientsResponse) {
          that.setState({ data: [clientsResponse] })
        }).catch(function (error) {
          console.log(error.message);
        });

      }
.....
render(){
.......
             <FormItem>{getFieldDecorator('antd',
                { initialValue: "PROPERTY" },
                { }] })(<Select
                  showSearch style={{ width: 200 }} 
                  onChange={this.handleChangeLineOfBusiness}>
                  {this.state.data.filter((los)=> los.type !=="ASSET" &&
                          <Option key={los.id} value={los.id}>{los.id}</Option>)}

                </Select>)}
              </FormItem>
.....

Causing the following error at browser :

Error: Objects are not valid as a React child (found: object with keys {id, description, en, gr, type}). If you meant to render a collection of children, use an array instead.
    in Select (created by Context.Consumer)

What am I doing wrong?

Answer

Replace your this.state.data.filter by-

this.state.data.filter(los => los.type !== 'ASSET').map(option => (
    <Option key={option.id} value={option.id}>{option.id}</Option>
));

Also as the clientResponse is already an array so, do it like-

this.setState({data: clientResponse})