map

1.js

// 
//app.js
//
import React, { Component } from "react";
import { helloWorld, List } from "./lets";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>{helloWorld}</h1>
        <List />
      </div>
    );
  }
}

export default App;

// 
//lets.js
//
import React, { Component, Fragment } from "react";

const helloWorld = "Hello!";

const list = [
  {
    title: "React",
    url: "https://reactjs.org/",
    author: "Jordan Walke",
    num_comments: 3,
    points: 4,
    objectID: 0
  },
  {
    title: "Redux",
    url: "https://redux.js.org/",
    author: "Dan Abramov, Andrew Clark",
    num_comments: 2,
    points: 5,
    objectID: 1
  }
];
class List extends Component {
  render() {
    return (
      <Fragment>
        {list.map(item => {
          return (
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
            </div>
          );
        })}
      </Fragment>
    );
  }
}

export { helloWorld, List };

2.js

//
//app.js
//
import React, { Component } from "react";
import { helloWorld, List } from "./lets";

const list = [
  {
    title: "React",
    url: "https://reactjs.org/",
    author: "Jordan Walke",
    num_comments: 3,
    points: 4,
    objectID: 0
  },
  {
    title: "Redux",
    url: "https://redux.js.org/",
    author: "Dan Abramov, Andrew Clark",
    num_comments: 2,
    points: 5,
    objectID: 1
  }
];

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>{helloWorld}</h1>
        <List lists={list} />
      </div>
    );
  }
}

export default App;

//
//lets.js
//
import React, { Component, Fragment } from "react";

const helloWorld = "Hello!";

const ListItem = ({ ...item }) => {
  return (
    <div key={item.objectID}>
      <span>
        <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span>
    </div>
  );
};

const List = ({ lists }) => {
  const elements = lists.map(item => {
    return <ListItem {...item} />;
  });
  return <Fragment>{elements}</Fragment>;
};

export { helloWorld, List };

3.js

//
// index.js
//
import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './components/TodoList';
import AppHeader from './components/AppHeader';
import SearchPanel from './components/SearchPanel';

import './index.css';
import ItemStatusFilter from './components/ItemStatusFilter';

const todoItem = [
  { id: 1, label: 'Попить кофе', important: false, done: false },
  { id: 2, label: 'Изучить аспекты React', important: true, done: false },
  { id: 3, label: 'Написать 300 строчек кода', important: false, done: false }
];

const App = () => {
  return (
    <div>
      <div className="todo-app">
        <AppHeader />

        <div className="search-panel d-flex">
          <SearchPanel />
          <ItemStatusFilter />
        </div>
        <TodoList items={todoItem} />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
//
// TodoList.js
import React from 'react';

import TodoListItem from '../TodoListItem';
import './TodoList.css';

const TodoList = ({ items }) => {
  const listItems = items.map(item => {
    const { id, ...itemProps } = item;
    return (
      <li key={id} className="list-group-item">
        <TodoListItem {...itemProps} />
      </li>
    );
  });
  return <ul className="list-group todo-list">{listItems}</ul>;
};

export default TodoList;

// Компонент спроектирован так, чтобы он отвечал только за отображения списка,
// Данные получает через свойства items
//
//TodoListItem
//
import React from 'react';

import './TodoListItem.css';

const TodoListItem = ({ label, important = false }) => {
  const style = {
    color: important ? 'tomato' : 'green',
    fontWeight: important ? 'bold' : 'normal'
  };
  return (
    <span className="todo-list-item">
      <span className="todo-list-item-label" style={style}>
        {label}
      </span>
      <button
        type="button"
        className="btn btn-outline-success btn-sm float-right"
      >
        <i className="fa fa-exclamation" />
      </button>

      <button
        type="button"
        className="btn btn-outline-danger btn-sm float-right"
      >
        <i className="fa fa-trash-o" />
      </button>
    </span>
  );
};

export default TodoListItem;