const Title = () => <h1>To jest blog o gotowaniu</h1>;
const Post = (props) => {
console.log(props.id)
return (
<>
<h2>{props.title}</h2>
{ props.showContent ? <p>{props.content}</p> : <><p>{props.shortContent}</p><button>Czytaj więcej</button></>}
<hr/>
</>
);
}
const Blog = function() {
const posts = [
{
title: "Przepis na naleśniki.",
shortContent: "Na naturalnym mleku...",
content: 'mleko, jaja zmieszać, dodać cukru i będzie zajebiście...',
showContent: true,
id: 2
},
{
title: "Przepis na Kurczaka.",
shortContent: "Na ostro...",
content: 'pokroić kurczaka, usmażyć i tak dalej...',
showContent: false,
id: 3
}
];
const postsList = posts.map(el => (
<Post
key= {el.id}
title={el.title}
content={el.content}
shortContent={el.shortContent}
shortContent={el.shortContent}
/>
))
return (
<div>
<Title/>
{postsList}
</div>
)
}
ReactDOM.render(
<Blog/>,
document.getElementById('root')
);