Commit 89c391d1 authored by Kristian Freeman's avatar Kristian Freeman

Answer key - nested-props-form

parent d229b77b
import React from 'react';
import React from "react";
import Header from './Header';
// Import the NewPost component from ./NewPost.
// Follow the structure of the other components in
// this section.
import Post from './Post';
import Sidebar from './Sidebar';
import Header from "./Header";
import NewPost from "./NewPost";
import Post from "./Post";
import Sidebar from "./Sidebar";
export default class Blog extends React.Component {
constructor() {
super();
this.state = {
blogTitle: '',
blogAuthor: '',
posts: [],
blogTitle: "",
blogAuthor: "",
posts: []
};
this.addPost = this.addPost.bind(this);
}
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
});
}),
})
);
}
addPost(newPost) {
const {posts} = this.state;
const { posts } = this.state;
const newPosts = [].concat(newPost, posts);
this.setState({posts: newPosts});
this.setState({ posts: newPosts });
}
render() {
const {blogTitle, blogAuthor, posts} = this.state;
const { blogTitle, blogAuthor, posts } = this.state;
/*
Replace the "Placeholder" span by rendering the NewPost component.
......@@ -52,14 +48,16 @@ export default class Blog extends React.Component {
return (
<div>
<Header blogTitle={blogTitle} blogAuthor={blogAuthor} />
<div style={{width: '100%'}}>
<span>Placeholder</span>
<div style={{ width: "100%" }}>
<NewPost addPost={this.addPost} />
</div>
<div style={{display: 'flex'}}>
<div style={{width: '75%'}}>
{posts.map((post, index) => <Post key={index} post={post} />)}
<div style={{ display: "flex" }}>
<div style={{ width: "75%" }}>
{posts.map((post, index) => (
<Post key={index} post={post} />
))}
</div>
<div style={{height: '100%', width: '25%'}}>
<div style={{ height: "100%", width: "25%" }}>
<Sidebar posts={posts} />
</div>
</div>
......
......@@ -36,49 +36,22 @@ export default class NewPost extends React.Component {
}
changeTitle(evt) {
// Updating the title input should call this
// value with the function argument `evt`, an event.
//
// If the text of the input is available at
// `evt.target.value`, how would you update
// `title` in state to that value?
this.setState({ title: evt.target.value })
}
changeBody(evt) {
// Updating the body input should call this
// value with the function argument `evt`, an event.
//
// If the text of the input is available at
// `evt.target.value`, how would you update
// `body` in state to that value?
this.setState({ body: evt.target.value })
}
render() {
/* This component has two state variables:
* - title
* - body
* Assign these to variables.
*
* Add the onSubmit prop to form, which should be set
* to this.addPost.
*
* Two additional props should be provided to the
* "Post Title" input:
* - value, which is set to the title value from state
* - onChange, which is set to this.changeTitle
*
* Two additional props should be provided to the
* "Post Body" textarea:
* - value, which is set to the body value from state
* - onChange, which is set to this.changeBody
*/
const { title, body } = this.state
return (
<form style={{padding: '2em'}}>
<form style={{padding: '2em'}} onSubmit={this.addPost}>
<div>
<input placeholder="Post Title" />
<input placeholder="Post Title" onChange={this.changeTitle} value={title} />
</div>
<div>
<textarea placeholder="Post Body" />
<textarea placeholder="Post Body" onChange={this.changeBody} value={body} />
</div>
<button type="submit">Add new post</button>
</form>
......
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