React render logic split approaches

react-render-splitting.js

class ChildComponent = (props) => <div>{props.name}</div>;

class MyComponent extends Component {

    renderItem(item, index) {
        return <ChildComponent key={index} name={item.name} />
    }
    
    render() {
        const {list1, list2, list3} = this.props;
        
        const renderedFirstList = list1.map(this.renderItem);
        const renderedSecondList = list2.map(item => <ChildComponent key={item.id} name={item.name} />);
        const renderedThirdList = list3.map(item => {
            const updatedName = item.name + "testing";
            return <ChildComponent key={item.id} name={updatedName} />
        });
        
		return (
		    <div>
		        {renderedFirstList}
		        {renderedSecondList}
		        {renderedThirdList}		    
		    </div>
		);
    }
}