title: React JS: How to call a function to return JSX code?
body: <p>I'm new to react and I'm trying to create a JSX element in a function. The JSX should dynamically add 2 buttons each time when you click the button. However, when render() calls this function, it isn't rendering the element (white page in browser). </p>
  
  <p>How would I go about fixing this? Any help would be appreciated. Thanks!</p>
  
  <pre><code>
  class Test extends Component {
    constructor(){
      super();
      this.state = {
          fields: [{key:'key', val:'val'}]
      }
      this.renderPanel = this.renderPanel.bind(this);
    }
  
    addField() {
      this.setState({
        fields: [...this.state.fields, {key:'key', val:'val'}],
      })
    }
  
    renderPanel(){
        return &lt;div&gt;
        &lt;form&gt;
            &lt;div id="testingAPanel"&gt;
                {()=&gt;this.state.fields.map((input,index) =&gt; {return(
                    &lt;tr&gt;
                    &lt;input type='button' id={index} value={input.key} /&gt;
                    &lt;input type='button' id={index} value={input.val} /&gt;
                    &lt;br/&gt;
                    &lt;/tr&gt;
                    )}
                )}
  
            &lt;/div&gt;
        &lt;/form&gt;
        &lt;button onClick={ () =&gt; this.addField() }&gt;
            CLICK ME TO ADD AN INPUT
        &lt;/button&gt;
    &lt;/div&gt;
    }
  
    render() {
      return (
          &lt;div class = 'test'&gt;
              {()=&gt;this.renderPanel()}
          &lt;/div&gt;      
      );
    }
  }
  
  export default Test;```
  </code></pre>