I have a question regarding the best way to do a render in react when using arrays. One way is to create functions which render the elements to be rendered and then call the functions to do the rendering. Other way is to just use the array.map to create the elements directly inside render. which way is better? I have heard that calling a function isn't the best way because it's slow and it creates a new instance of the element each time it is rerendered.
What do you guys think?
export default class Calculator extends React.Component {
renderButtons = arr => {
let btnArr = [];
arr.map(item => {
btnArr.push(<button>{item}</button>);
});
return btnArr;
};
render() {
let keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let operations = ["+", "-", "*", "/"];
return (
<div>
{keys.map(item => {
return <button key={item}>{item}</button>;
})}
<div>{this.renderButtons(operations)}</div>
</div>
);
}
}
One is for the keys array, where I have just directly run the map on it to render the number buttons
I have used the other method for the operations buttons where I have called a function to do the rendering.
I could have used the same way for the numbers also, but just want to know which method is better.
