React

by Vlad Rasenko

HTML

<div id="app"></div>

CSS

.card {
  margin-bottom: 15px;
}

.title {
  font-weight: bold;
}

React

function Card({ title, children }) {
  return <div className='card'>
    <hr />
    <div className="title">{title}</div>
    <hr />
    <div className="content">{children}</div>
  </div>
}

const news = [{
	title: 'News one',
  text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates fuga facere mollitia quos eum voluptatibus et autem ex dignissimos. Animi debitis repellendus ea velit, odit totam recusandae quas nemo. Sunt.'
}, {
	title: 'News two',
  text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates fuga facere mollitia quos eum voluptatibus et autem ex dignissimos. Animi debitis repellendus ea velit, odit totam recusandae quas nemo. Sunt.'
},{
	title: 'News three',
  text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates fuga facere mollitia quos eum voluptatibus et autem ex dignissimos. Animi debitis repellendus ea velit, odit totam recusandae quas nemo. Sunt.'
}]

function App() {
  return <div>
    {news.map(item => <Card title={item.title} key={item.title}>{item.text}</Card>)}
  </div>
}

ReactDOM.render(<App />, document.querySelector("#app"))