Commit d229b77b authored by Kristian Freeman's avatar Kristian Freeman

Answer key - nested-props

parent 404b1a53
import React from 'react';
import React from "react";
import Header from './Header';
import Post from './Post';
import Sidebar from './Sidebar';
import Header from "./Header";
import Post from "./Post";
import Sidebar from "./Sidebar";
export default class Blog extends React.Component {
constructor() {
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 `[]`
this.state = {
blogTitle: null,
blogAuthor: null,
posts: []
};
}
componentDidMount() {
const url = 'https://bytesized-training-assets.herokuapp.com/blog.json';
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,
posts: json.posts
});
}),
})
);
}
render() {
// When you've replaced CHANGE_ME later in the render
// function, you can delete the below line.
var CHANGE_ME;
// The Blog component has three state values:
// - blogTitle
// - blogAuthor
// - posts
// Assign each of these to a variable of your choice.
// A number of additions need to be made to the return
// section of the render function below.
//
// Header:
// - Pass the value of your blogTitle variable as a
// prop `blogTitle`.
// - Pass the value of your blogAuthor variable as a
// prop `blogAuthor`.
// Post:
// - 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 each "item" as the prop post for each
// component.
// Sidebar:
// - Pass the value of your posts variable as a prop `posts`.
const { blogTitle, blogAuthor, posts } = this.state;
return (
<div>
<Header />
<div style={{display: 'flex'}}>
<div style={{width: '75%'}}>
{CHANGE_ME.map((item, index) => <Post key={index} />)}
<Header blogTitle={blogTitle} blogAuthor={blogAuthor} />
<div style={{ display: "flex" }}>
<div style={{ width: "75%" }}>
{posts.map((item, index) => (
<Post key={index} post={item} />
))}
</div>
<div style={{height: '100%', width: '25%'}}>
<Sidebar />
<div style={{ height: "100%", width: "25%" }}>
<Sidebar posts={posts} />
</div>
</div>
</div>
......
import React from 'react';
import React from "react";
export default class Comment extends React.Component {
render() {
// The Comment component receives a single prop.
// This prop has three fields on it:
// - commentAuthor
// - commentBody
// - postDate
// Try using ES6's "destructuring" syntax to quickly
// define all three as variables. For instance, given
// an object like:
//
// var obj = { name: "Me", age: 99 }
//
// I can use:
//
// var { name, age } = obj;
//
// To quickly set both variables.
//
// Do the same with `author`, `body`, and `date`, and replace
// the static text below with the values from these
// variables.
//
const {
comment: { commentAuthor, commentBody, postDate }
} = this.props;
return (
<div>
<h5>Author</h5>
<p>Body</p>
<h5>{commentAuthor}</h5>
<p>{commentBody}</p>
<p>
<small>Date</small>
<small>{postDate}</small>
</p>
</div>
);
......
import React from 'react';
import React from "react";
export default class Header extends React.Component {
render() {
// The Header component receives two props that
// you should have defined previously, in the Blog
// component. Set these props to variables, and replace
// "Title" and "Author" with those values in the
// return portion of this function.
const { blogTitle, blogAuthor } = this.props;
return (
<div style={{background: '#eee', padding: '1em 4em'}}>
<h1>Title</h1>
<h2>Author</h2>
<div style={{ background: "#eee", padding: "1em 4em" }}>
<h1>{blogTitle}</h1>
<h2>{blogAuthor}</h2>
</div>
);
}
......
import React from 'react';
import Comment from './Comment';
import React from "react";
import Comment from "./Comment";
export default class Post extends React.Component {
render() {
// The Post component receives one prop. That prop
// contains three pieces of data that we care about:
//
// - postTitle
// - postContent
// - comments
//
// Assign each of these to a variable of your choice.
// Remember that because they are _on_ the passed-in
// prop, you'll call them in a format like:
// var myProp = this.props.myProp;
// var myField = myProp.myField;
const {
post: { postTitle, postContent, comments }
} = this.props;
// 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
// the following:
//
// {myArray.map((value, index) =>
// <Subcomponent key={index} prop={value} />
// )}
return (
<div style={{padding: '2em'}}>
<h1>Title</h1>
<p>Content</p>
{CHANGE_ME.map((comment, index) => <Comment key={index} />)}
<div style={{ padding: "2em" }}>
<h1>{postTitle}</h1>
<p>{postContent}</p>
{comments.map((comment, index) => (
<Comment key={index} comment={comment} />
))}
</div>
);
}
......
import React from 'react';
import React from "react";
export default class Sidebar extends React.Component {
render() {
// When you have replaced CHANGE_ME later in the
// render function, you can remove the below line.
var CHANGE_ME;
// The Sidebar component receives one prop that
// you should have defined previously, in the Blog
// component.
//
// Set this prop to a variable, and then "loop"
// through it using `map`. In the map function, return
// a <li> tag with the post title for each post. A
// post has the format:
//
// { postTitle: "Title", ... }
//
// To display the post title, you'll want to use
// post.postTitle in your map function.
//
// You may want to look at the map call in the Blog
// component's render function, to see a similar
// pattern.
//
const { posts } = this.props;
return (
<div style={{background: "#eee", padding: "1em"}}>
<div style={{ background: "#eee", padding: "1em" }}>
<h3>Recent posts</h3>
<ul>
{posts.map((post, index) => (
<li key={index}>{post.postTitle}</li>
))}
</ul>
</div>
)
);
}
}
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