dino-blog-state.md

Code-Along: Edit Dino Blog

Blog Project: Implement State

Let's implement state in our blog.

Deliverable:

Let's implement state in our blog by making the body a mutable value.

Steps to Achieve

1. Set an initial state prop in your component that contains content or body for posts.
2. Add a button to somewhere in your page (up to you which component to add to!). This button should onClick open an alert that takes a value.
3. Take the user inputed value into the alert box and use that return value to update the state of the body or content of your post.

Some things to note:

1. Set an initial state for our Post component. The state object should have an attribute called body. The value of this.state.body should be Check out this body property!.
2. Modify Post's render() method so that it uses the body from state, not props.
3. Create a changeBody() method inside App that updates body based on a user's input.
   • You should use setState somewhere in this method.
   • How can you get user input? Keep it simple and start with prompt.
4. Add a button to Post's render() method that triggers changeBody().

Solution Image

This is what your solution should look like.