Как отобразить функцию, возвращающую массив в React

В примере 1. Я могу сопоставить функцию, передав ее как опору дочернему компоненту, однако, что, если я не хочу передавать функцию как опору дочернему компоненту, как я могу сопоставить функцию в самом основном компоненте? как показано в примере 2.

ПРИМЕР 1.

class App extends React.Component {
  render() {
    return(
     <div>
       <Foo data = {data()} />
      </div>
    )
  }
}

class Foo extends React.Component {
  render() {
   return (
      <div>
        {this.props.data.map(item => {
          return (
             <div>{item.id} {item.name}</div>
           )
        })}
      </div>
    )
  }
}


function data() {
  return (
   [
     {id: 1, name: "Jack"},
     {id: 2, name: "Mark"},
     {id: 3, name: "Mike"},
     {id: 4, name: "Russell"}
   ]
  )
}

ПРИМЕР 2.

class App extends React.Component {
  render() {
    return(
     <div>
       {this.data().map(() => {
          //I know this is not correct so what is the right way.
        })}           
      </div>
    )
  }
}


function data() {
  return (
   [
     {id: 1, name: "Jack"},
     {id: 2, name: "Mark"},
     {id: 3, name: "Mike"},
     {id: 4, name: "Russell"}
   ]
  )
}