React JS: How to call a function to return JSX code? - render

Question

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).
How would I go about fixing this? Any help would be appreciated. Thanks!
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 <div>
<form>
<div id="testingAPanel">
{()=>this.state.fields.map((input,index) => {return(
<tr>
<input type='button' id={index} value={input.key} />
<input type='button' id={index} value={input.val} />
<br/>
</tr>
)}
)}
</div>
</form>
<button onClick={ () => this.addField() }>
CLICK ME TO ADD AN INPUT
</button>
</div>
}
render() {
return (
<div class = 'test'>
{()=>this.renderPanel()}
</div>
);
}
}
export default Test;```

Answer 1

class App extends React.Component {
buttonClick(){
console.log("came here")
}
subComponent() {
return (<div>Hello World</div>);
}
render() {
return (
<div className="patient-container">
<button onClick={this.buttonClick.bind(this)}>Click me</button>
{this.subComponent()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
it depends on your need, u can use either this.renderIcon() or bind this.renderIcon.bind(this)
UPDATE
This is how you call a method outside the render.
buttonClick(){
console.log("came here")
}
render() {
return (
<div className="patient-container">
<button onClick={this.buttonClick.bind(this)}>Click me</button>
</div>
);
}
The recommended way is to write a separate component and import it.