Manage State Locally First
Here you'll finish creating the DisplayMessages
component.
First, in the render()
method, have the component render an input
element, button
element, and ul
element. When the input
element changes, it should trigger a handleChange()
method. Also, the input
element should render the value of input
that's in the component's state. The button
element should trigger a submitMessage()
method when it's clicked.
Second, write these two methods. The handleChange()
method should update the input
with what the user is typing. The submitMessage()
method should concatenate the current message (stored in input
) to the messages
array in local state, and clear the value of the input
.
Finally, use the ul
to map over the array of messages
and render it to the screen as a list of li
elements.
Tests
- Waiting: 1. The
DisplayMessages
component should initialize with a state equal to{ input: "", messages: [] }
. - Waiting: 2. The
DisplayMessages
component should render adiv
containing anh2
element, abutton
element, aul
element, andli
elements as children. - Waiting: 3.
.map
should be used on themessages
array. - Waiting: 4. The
input
element should render the value ofinput
in local state. - Waiting: 5. Calling the method
handleChange
should update theinput
value in state to the current input. - Waiting: 6. Clicking the
Add message
button should call the methodsubmitMessage
which should add the currentinput
to themessages
array in state. - Waiting: 7. The
submitMessage
method should clear the current input.
/** * Your test output will go here */