React create own Element for Export and Import it dont work

Question

i create a mask and have here some different field types so i think im better to create a element and use it later in the app with so im trying with export and import but i have not thaht success i wish.

My plan is give a array with fields and one with selected fields to my component(this works, i see it in the state) and get the element back

Currently my component gives a array back but i want the html element which is usally genereated by render

    import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class Selbox extends Component {

     constructor(props) {
    super(props);
       this.state = {
        fields : JSON.parse(props.fields),
        selectedval : JSON.parse(props.sel)
        };          
   }
  render() {
     const select_box = this.state.fields.map((ck, index) =><div key={ck.id} className="checkbox"><label><input type="checkbox"   checked={this.state.selectedval.indexOf(ck.id) != -1 ? true: false} value={ck.id}/>{ck.name}</label></div>);          
    return ({select_box})
  }
}


export default selbox

And i want import it in

import React from 'react';
import ReactDOM from 'react-dom';
import selbox from './selbox';

class Liste extends React.Component {
 constructor(props) {
    super(props);
       this.state = {};
  }

 componentDidMount(){}

 render() {
    return(<selbox sel='["4","6"]'  fields='[{"name":"field1","id":"1"},{"name":"field2","id":"2"},{"name":"field3","id":"3"},{"name":"field4","id":"4"},{"name":"field5","id":"5"}]' />);
  }
}


ReactDOM.render(
  <Liste />,
  document.getElementById('gb_28338201')
);