Passing an array of objects to component?

Question

JavaScript

Good morning! Need help! I have an array of objects

import React from 'react';
import JobsList from './JobsList';

const jobs = [
  {
    id: 1,
    name: 'John',
    work: 'Taxi'
  },
  {
    id: 2,
    name: 'Alex',
    work: 'Doctor'
  }
];

export default () => <JobsList Jobs={jobs} />;

Here is the component itself:

import React, { Component } from 'react';
import Jobs from './JobsListContainer';

class JobsList extends Component {

  render(){
    const { Jobs } = this.props;

    console.log(Jobs);

    return(
      <div>
         {Jobs.map(e => (
          <ul key={e.id}>
            <li>{e.name}</li>
            <li>{e.work}</li>
          </ul>
        ))}
      </div>
    );
  }
}

export default JobsList;

At console.log I get undefined. What is my
App.jsx error

import React, { Component } from 'react';
import JobsList from './components/JobsList';

class App extends Component {

  render() {

    return (
      <div>
        <JobsList />
      </div>
    );
  }
}

export default App;

Answer 1

Вы не передаете в JobsList никаких props, следовательно this.props.Jobs = undefined.
Выносите ваши "джобсы" в тот же файл где export default App, и пишите:

return (
      <div>
        <JobsList Jobs={jobs} />
      </div>
    );