reactjs - Do I *have to* flatten all hierarchical component declarations in React.JS? -

i'm wondering canonical method creating dynamic select component in react. have to create separate component returns options per code below in order able customize value through props each entry, , include these separate select component?

class listentry extends react.component {   render = () => {     return(       <option value={this.props.ovalue}>{this.props.ovalue}</option>     )   } }   class somelist extends react.component {   genstuff = (n) => {     var theentries = [];     for(var = 0; < n; i++) {       theentries.push(<listentry ovalue={math.random().tostring()} />)     };     return(theentries)   }    render = () => {     var entries = this.genstuff(10);     return(       <select>         {entries}         <listentry ovalue="a basic entry"/>         <listentry ovalue="another"/>       </select>     )   } } 

is there "accepted" way within somelist component itself? if so, advantages, disadvantages?

i have used technique (successfully) svg elements above question applies too:

class smallcircle extends react.component {   render = () => {     return(       <circle cx={this.props.scx} cy={this.props.scy} r="5"          stroke="blue" fill="dodgerblue" strokewidth="2"/>)   } }   class somesvg extends react.component {    randomcoords = (n, domain) => {     let xs = [...array(n).keys()].map(i=> {       return {         "i": i,         "x": math.floor(math.random() * domain + 1).tostring(),         "y": math.floor(math.random() * domain + 1).tostring()       }     })     return(xs)   }    render = () => {     var svgcoords = this.randomcoords(5000, 700);     var thecircles = svgcoords.map(xy => <smallcircle key={xy.i.tostring() + xy.x.tostring() + xy.y.tostring()}          scx={xy.x} scy={xy.y} />);     return(       <svg width="700" height="700">         {thecircles}         <circle cx="1" cy="1" r="100" stroke="orange" strokewidth="7" fill="grey" />         <circle cx="700" cy="700" r="100" stroke="green" strokewidth="7" fill="grey" />         <circle cx="1" cy="700" r="100" stroke="red" strokewidth="7" fill="grey" />         <circle cx="700" cy="1" r="100" stroke="blue" strokewidth="7" fill="grey" />         <smallcircle scx="200" scy="200" />       </svg>     )   } } 

so question is, react require "unwrap" (ie flatten) hierarchical component structures multiple granular top-level components time?

here output, btw:

edit: realise haven't included "key" each select entry , it's complaining in console, question isn't affected this.

no, react not require that. if wanted to, put react code in 1 giant component.

so, why not that? there's many reasons actually: readability, reusability, testability, maintainability, etc.

meaning: create seperate components when need logic stand on own. in question, have listentry seperate component. why? if dont use component anywhere else in code, can put logic inside somelist if wanted to.

i think key question this: dont need inherit react.component if dont use of logic. basic 'stateless components' can written function:

function mycomponent(props) {     (...some logic...)     return <option>{ props.value }</option>; } 

or, es6 equivalent:

const mycomponent = props => {      (...some logic...)     return <option>{ props.value }</option>; } 

or, if dont need logic in rendering @ all:

const mycomponent = props => <option>{ props.value }</option>; 

so, define function in components render (or in function body stateless components), so:

class somelist extends component {     render() {         const listentry = props => <option>{ props.value }</option>;         return (             <select>                 { [...array(10).keys()].map(x => (                     <listentry key={x} value={math.random()} />                 ))}                 <listentry value="basic" />                 <listentry value="another" />             </select>         );     } } 

here, code our listentry component defined in somelist components' render. (disclaimer: don't think render best place tho, it's illustrate point). though, don't see point in doing so. since listentry doesnt contain logic, why not use <option> directly instead of listentry? simple as:

const somelist = () => {     return (         <select>             { [...array(10).keys()].map(index => (                 <option key={index}>{ math.random() }</option>             ))}             <option>basic</option>             <option>another</option>         </select>     ); }; 

as svg example: if take above , create functions components need, written this:

const somesvg = () => {     const smallcircle = props => (         <circle {...props} r="5" stroke="blue" fill="dodgerblue" strokewidth="2" />     );      const bigcircle = props => (         <circle {...props} r="100" strokewidth="7" fill="grey" />     );      const randomcoords = (n, domain) => [...array(n).keys()].map(() => ({         x: math.floor(math.random() * domain + 1),         y: math.floor(math.random() * domain + 1)     }));      return (         <svg width="700" height="700">             { randomcoords(5000, 700).map((xy, i) => <smallcircle key={i} cx={xy.x} cy={xy.y} />) }             <bigcircle cx="1" cy="1" stroke="orange" />             <bigcircle cx="700" cy="700" stroke="green" />             <bigcircle cx="1" cy="700" stroke="red" />             <bigcircle cx="700" cy="1" stroke="blue" />             <smallcircle cx="200" cy="200" />         </svg>     ); };