FreeCodeCamp/HelpFrontEnd

@all - i am new to js. I have written accordion code
onSelect(id) {

• I am trying to increase the performance of the code.
• In my code I have used onSelect function in both the components.
• is it possible to combine to into one.so that it will be faster
• providing my code below...

http://jsfiddle.net/b4L6kyg4/89/

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: props.selected };
    this.enhanceSection = this.enhanceSection.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }
  enhanceSection(child) {

    //var child;
    //var props;

    console.log("enhanceSection");

    // debugger;


    var selectedId = this.state.selected,
           id = child.props.id;

        return React.cloneElement(child, {
            key: id,
            selected: id === selectedId,
            onSelect: this.onSelect
        });

  }

  onSelect(id) {
        console.log("onSelect");


        if (this.state.selected === id) {
          console.log("onSelect if");
          console.log("his.state.selected---->" + this.state.selected);
          this.setState({selected: ""});
        } else {

            console.log("onSelect else");

            this.setState({selected: id});
        } 

  }

  render() {
        console.log("render");
        // debugger;


    var children = React.Children.map(
            this.props.children, this.enhanceSection);

    console.log("children----->" + JSON.stringify(children));

    return (
      <div className="accordion">
        <p> testing </p>
          {children}
      </div>
    );
  }

}


class SectionAccordion extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this)
  };

  onSelect() {
        console.log("onSelect");
       // debugger;


    this.props.onSelect(this.props.id);
  }

  render() {
        console.log("render section");
        //debugger;


        console.log("accordion / the Accordion Section component");
        var className = 'accordion-section' + (this.props.selected ? ' selected' : '');

        return (
            <div className={className}>
                <div className = "mobile-accordion-question-title mobile-submenu-dropmenuHeader">

                  <h3 onClick={this.onSelect}>
                      {this.props.title}
                  </h3>

                  <div className="up-arrow"></div>
                </div>




                <div onClick={this.onSelect} className="body">
                    {this.props.children}
                </div>
            </div>
        );

  }

}


React.render((

    <div className="form-section">

        <div className="accordionTesting">
            <h2 className="mobile-h2 mobile-accordionTitle">kick 1</h2>

            <Accordion selected="">
              <SectionAccordion title="Section 1" id="1">
                  Section 1 content
              </SectionAccordion>
              <SectionAccordion title="Section 2" id="2">
                  Section 2 content
              </SectionAccordion>
              <SectionAccordion title="Section 3" id="3">
                  Section 3 content
              </SectionAccordion>
          </Accordion>
        </div>

        <div className="accordionTesting">
            <h2 className="mobile-h2 mobile-accordionTitle">kick 2</h2>

            <Accordion selected="">
              <SectionAccordion title="Section 3" id="4">
                  Section 3