Should I * flatten all hierarchical component declarations in React.JS?

Question

I am wondering what is the canonical method of creating a dynamic select component in React. Should I create a separate component that returns the parameters in accordance with the code below, in order to be able to adjust the value through the details for each record, and then include them in a separate selection 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 i = 0; i < 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 any other “accepted” way to do this inside the SomeList component itself? If so, what are the advantages, disadvantages?

I also used this method (successfully) for svg elements, so the above question also applies:

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>
    )
  }
}

, , , React "" (.. ) ?

: btw:

EDIT: , "" , .

Answer 1

, React , . , React .

, ? : , , , ..

: , . ListEntry . ? - , SomeList, .

, : React.Component, - . " " :

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

ES6:

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

, :

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

, render ( ), :

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>
        );
    }
}

ListEntry SomeList. ( : , render - , ). , . ListEntry , <option> ListEntry? :

const SomeList = () => {
    return (
        <select>
            { [...Array(10).keys()].map(index => (
                <option key={index}>{ Math.random() }</option>
            ))}
            <option>Basic</option>
            <option>Another</option>
        </select>
    );
};

SVG: , :

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>
    );
};

Answer 2

React , . .

, Select - .

class Select extends Component {
  render() {
    return (
      <select>
        <option value="">Select...</option>
        {this.props.options.map(option =>
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        )}
      </select>
    );
  }
}

JavaScript option, .

var options = [
  { value: 'one', text: 'One' },
  { value: 'two', text: 'Two' }
];

<Select options={options} />

, Select . .

- . .

- . , . , , .

, , . highlight prop to option .

class Option extends Component {
  render() {
    return (
      <option
        value={this.props.value}
        className={this.prop.highlight ? "highlight" : ""}
      >
        {this.props.text}
      </option>
    );
  }
}

class Select extends Component {
  render() {
    return (
      <select className="my-select">
        {this.props.children} // render children of Select tag
      </select>
    );
  }
}

class HighLightingSelect extends Component {
  render() {
    return (
      <Select>
        {this.props.options((option, index) =>
          <Option key={option.value} value={option.value} highlight={index % 2}>
            {option.text}
          </Option>
        )}
      </Select>
    );
  }
}

, , . , , .

, . , React . , React.

.