Code-Along: Edit Dino Blog
Let's implement state in our blog.
Deliverable:
Let's implement state in our blog by making the body
or content
a mutable value.
Steps to Achieve
Set an initial state prop in your component that contains content or body for posts.
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.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:
Set an initial state for our
App
component. Thestate
object should have an attribute calledbody
. Remove the prop we set forApp
and put it into the initial state instead. The value ofthis.state.body
should beCheck out this body property!
.Modify
App
'srender()
method so that it uses thebody
from state, not props.Create a
changeBody()
method insideApp
that updatesbody
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
.
Add a button to
App
'srender()
method that triggerschangeBody()
.
Solution Image
This is what your solution should look like.
Last updated