Commit 8a460409 authored by Kristian Freeman's avatar Kristian Freeman

2018-04-21T20:22:05

parent cb2290fc
......@@ -6,24 +6,26 @@ import Sidebar from './Sidebar';
export default class Blog extends React.Component {
constructor() {
super()
super();
// A state object should be initialized with
// the following:
// - blogTitle should be set to null
// - blogAuthor should be set to null
// - posts should be an empty array `[]`
}
}
componentDidMount() {
const url = "https://bytesized-training-assets.herokuapp.com/blog.json"
fetch(url).then(resp => resp.json().then(json => {
this.setState({
blogTitle: json.blogTitle,
blogAuthor: json.blogAuthor,
posts: json.posts
})
}));
const url = 'https://bytesized-training-assets.herokuapp.com/blog.json';
fetch(url).then(resp =>
resp.json().then(json => {
this.setState({
blogTitle: json.blogTitle,
blogAuthor: json.blogAuthor,
posts: json.posts,
});
}),
);
}
render() {
......@@ -49,31 +51,23 @@ export default class Blog extends React.Component {
// - Update the value CHANGE_ME below to your posts
// variable. This will "loop" through the posts
// array and create a Post component for each post.
// Pass in post (value) _as_ the prop post (name) for each
// Pass in each "item" as the prop post for each
// component.
// <Post name={value} />
// Sidebar:
// - Pass the value of your posts variable as a prop `posts`.
return (
<div>
<Header
/>
<div style={{display: "flex"}}>
<div style={{width: "75%"}}>
{CHANGE_ME.map((post, index) =>
<Post
key={index}
/>
)}
<Header />
<div style={{display: 'flex'}}>
<div style={{width: '75%'}}>
{CHANGE_ME.map((item, index) => <Post key={index} />)}
</div>
<div style={{height: "100%", width: "25%"}}>
<Sidebar
/>
<div style={{height: '100%', width: '25%'}}>
<Sidebar />
</div>
</div>
</div>
)
);
}
}
......@@ -27,9 +27,10 @@ export default class Comment extends React.Component {
<div>
<h5>Author</h5>
<p>Body</p>
<p><small>Date</small></p>
<p>
<small>Date</small>
</p>
</div>
)
);
}
}
......@@ -9,11 +9,10 @@ export default class Header extends React.Component {
// return portion of this function.
return (
<div style={{ background: "#eee", padding: "1em 4em" }}>
<div style={{background: '#eee', padding: '1em 4em'}}>
<h1>Title</h1>
<h2>Author</h2>
</div>
)
);
}
}
......@@ -16,13 +16,8 @@ export default class Post extends React.Component {
// var myProp = this.props.myProp;
// var myField = myProp.myField;
// In the return portion of render, replace the static
// "Title" with an <h1> tag containing the value of your
// postContent variable.
//
// Replace the static "Body" with an <p> tag containing
// the value of your postTitle variable.
//
// Replace the h1 "Title" text with your postTitle.
// Replace the p "Content" text with your postContent.
// Replace the static CHANGE_ME in line 38 by mapping through your
// comments variable, rendering a <Comment> component
// with the prop comment. This will look somewhat like
......@@ -32,17 +27,11 @@ export default class Post extends React.Component {
// <Subcomponent key={index} prop={value} />
// )}
return (
<div style={{padding: "2em"}}>
<div style={{padding: '2em'}}>
<h1>Title</h1>
<p>Content</p>
{CHANGE_ME.map((comment, index) =>
<Comment
key={index}
{/* what value are we not passing in yet? */}
/>
)}
{CHANGE_ME.map((comment, index) => <Comment key={index} />)}
</div>
);
}
}
......@@ -7,30 +7,25 @@ var PROP_TEXT_HERE;
class MyApp extends React.Component {
render() {
// Instead of a span below, try using
// MyComponent, as well as passing a name prop.
return (
<div>
{/*
Replace the below span tag with
your nested component
*/}
<span></span>
<span>Placeholder</span>
</div>
)
);
}
}
class MyComponent extends React.Component {
render() {
// Replace PROP_TEXT_HERE with the
// `name` prop passed in to the component.
// Remember to define a name variable, using
// the value from `this.props`.
return (
<div>
<h1>Hello!</h1>
{/*
Replace PROP_TEXT_HERE with the
`name` prop passed in to the component.
Remember to define a name variable, using
the value from `this.props`.
*/}
<span>{PROP_TEXT_HERE}</span>
</div>
);
......@@ -39,7 +34,9 @@ class MyComponent extends React.Component {
// No changes are needed below this line.
const root = document.getElementById("root");
if (root) { ReactDOM.render(<MyApp />, root); }
const root = document.getElementById('root');
if (root) {
ReactDOM.render(<MyApp />, root);
}
export { MyApp, MyComponent };
export {MyApp, MyComponent};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment