How to render a option of select element - reactjs

Question

I wrote this function to make a tree options.

makeTreeOption(tree) {
    let ouput = `<optgroup label="${tree.title}">`;
    if (tree['children']) {
      tree.children.forEach(children => {
        if (children['children']) {
          ouput += this.makeTreeOption(children);
        } else {
          ouput += `<option>${children.title}</option>`;
        }
      });
    }
    ouput += `</optgroup>`;
    return ouput;
  }

but when I want to render it:

  <select>
       {this.makeTreeOption(data)}
  </select>

it returns this:

Answer 1

Rather than building a string you need the makeTreeOption method to return JSX. Something like:

function makeTreeOption(tree) {
    return <optgroup /*...optgroup props */>{
        tree.children.map(
            child => child.children
                ? makeTreeOption(child)
                : <option /* ...option props */>{ child.title }</option>
        )
    }</optgroup>
}