Theory
Showing flash messages is a fairly simple task. Just a bit of code like the following example and we can complete this feature:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reactstrap'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function-variable function">ExampleComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> isFlashMessageShown <span class="token punctuation">,</span> setIsFlashMessageShown <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">showFlashMessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setIsFlashMessageShown</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">hideFlashMessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setIsFlashMessageShown</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Alert</span> <span class="token attr-name">color</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> primary <span class="token punctuation">'</span></span> <span class="token attr-name">isOpen</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> isFlashMessageShown <span class="token punctuation">}</span></span> <span class="token attr-name">toggle</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> hideFlashMessage <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text"> Hello there! </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Alert</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Button</span> <span class="token attr-name">color</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> primary <span class="token punctuation">'</span></span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> showFlashMessage <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text"> Show flash message </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
For the example above, the flash message will be displayed inside ExampleComponent. However, it is only displayed inside ExampleComponent with control code hidden / present in this component only. If we want the flash message to be displayed when redirecting from another component (using react-router
), such as when the data is successfully created in the input form, we redirect the page to display the list and display the data. What about displaying flash messages on this list page?
For React apps using react-router
, we use them
1 2 | history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> path <span class="token punctuation">)</span> |
to perform redirects to path
defined in Route
components (*). In addition to the path
parameter above, the push
function can also take another parameter, state
, which is the object that contains the status of the location
. When calling the push
function, the new location
containing pathname
, search
, hash
(analyzed from path
) and state
will be pushed into the history stack of the react-router. In component redirected to, location
of this component is the location
just pushed on the stack that history.
As such, we can take advantage of this to assign the flash message to the state
, when displaying the redirected component, retrieve the flash message data in the state
of the location
and display it.
(*) function history.push can also take an object parameter containing pathname
, search
and state
as follows:
1 2 3 4 5 6 | history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">:</span> <span class="token string">'/posts'</span> <span class="token punctuation">,</span> search <span class="token punctuation">:</span> <span class="token string">'?category=game'</span> state <span class="token punctuation">:</span> <span class="token punctuation">{</span> redirectFrom <span class="token punctuation">:</span> <span class="token string">'/redirected_path'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
For example
To illustrate, we’ll make an example React application that has functions for creating and displaying notes lists. When creating a note successfully, the application will redirect to the notes list page and display a flash message to notify creating a note successfully on this list page.
Add + show list of notes
Create a new project with create-react-app
, then move into this directory:
1 2 3 | create-react-app flash-message cd flash-message |
Add css of bootstrap to public/index.html
file:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css <span class="token punctuation">"</span></span> <span class="token attr-name">integrity</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T <span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> anonymous <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> |
Add react-router-dom
package:
1 2 | yarn add react-router-dom |
Create src/NoteForm.jsx
file containing form to create notes. The form includes a textarea used to enter note content and a submit button. When submitting the form, the addNote
function passed from the props
will be used to create notes, which will then redirect to /
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">NoteForm</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> history <span class="token punctuation">,</span> addNote <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> content <span class="token punctuation">,</span> setContent <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">submitForm</span> <span class="token operator">=</span> event <span class="token operator">=></span> <span class="token punctuation">{</span> event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">addNote</span> <span class="token punctuation">(</span> content <span class="token punctuation">)</span> <span class="token punctuation">;</span> history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> row mt-5 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> col-md-10 offset-md-1 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h4</span> <span class="token punctuation">></span></span> <span class="token plain-text">Add Note</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h4</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">onSubmit</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> submitForm <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> form-group <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> textarea</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> content <span class="token punctuation">'</span></span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> form-control <span class="token punctuation">'</span></span> <span class="token attr-name">rows</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> 10 <span class="token punctuation">'</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> Enter content <span class="token punctuation">'</span></span> <span class="token attr-name">onChange</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> e <span class="token operator">=></span> <span class="token function">setContent</span> <span class="token punctuation">(</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> form-group <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> submit <span class="token punctuation">'</span></span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> btn btn-primary <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">Submit</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span> <span class="token punctuation">(</span> NoteForm <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Create a src/Notes.jsx
file containing the component which displays the list of notes taken from the props
notes
. The note contains the content and creation time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Notes</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> notes <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> mt-5 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> row <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> col-md-10 offset-md-1 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h4</span> <span class="token punctuation">></span></span> <span class="token plain-text">Notes</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h4</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> text-center <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Link</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> btn btn-primary <span class="token punctuation">'</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> /create_note <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token plain-text"> Create note </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Link</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> row mt-4 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> col-md-10 offset-md-1 <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> notes <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> notes <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> note <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> note <span class="token punctuation">'</span></span> <span class="token attr-name">key</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> index <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> note-content <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> note <span class="token punctuation">.</span> content <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> note-createdAt <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> note <span class="token punctuation">.</span> createdAt <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Notes <span class="token punctuation">;</span> |
Edit the src/App.js
file. New App
will be available
- State
notes
contain notes created.notes
will be passed into theNotes
component. - The
addNote
function is used to add newnotes
tonotes
. This function will be passed to theNoteForm
component. - The routes declare the corresponding links and components.
/
for theNotes
component,/create_note
for theNoteForm
. - utility functions to create
createdAt
values for notes when creating notes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token keyword">as</span> Router <span class="token punctuation">,</span> Switch <span class="token punctuation">,</span> Route <span class="token punctuation">,</span> Link <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Notes <span class="token keyword">from</span> <span class="token string">'./Notes'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> NoteForm <span class="token keyword">from</span> <span class="token string">'./NoteForm'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">zeroPadded</span> <span class="token operator">=</span> num <span class="token operator">=></span> num <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token template-string"><span class="token string">`0</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> num <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">:</span> num <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">timestamp</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> time <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> year <span class="token operator">=</span> time <span class="token punctuation">.</span> <span class="token function">getFullYear</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> month <span class="token operator">=</span> <span class="token function">zeroPadded</span> <span class="token punctuation">(</span> time <span class="token punctuation">.</span> <span class="token function">getMonth</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token function">zeroPadded</span> <span class="token punctuation">(</span> time <span class="token punctuation">.</span> <span class="token function">getDate</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> hour <span class="token operator">=</span> <span class="token function">zeroPadded</span> <span class="token punctuation">(</span> time <span class="token punctuation">.</span> <span class="token function">getHours</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> minute <span class="token operator">=</span> <span class="token function">zeroPadded</span> <span class="token punctuation">(</span> time <span class="token punctuation">.</span> <span class="token function">getMinutes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> second <span class="token operator">=</span> <span class="token function">zeroPadded</span> <span class="token punctuation">(</span> time <span class="token punctuation">.</span> <span class="token function">getSeconds</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> year <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> month <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> day <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> hour <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> minute <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> second <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> notes <span class="token punctuation">,</span> setNotes <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">addNote</span> <span class="token operator">=</span> content <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> newNote <span class="token operator">=</span> <span class="token punctuation">{</span> content <span class="token punctuation">,</span> createdAt <span class="token punctuation">:</span> <span class="token function">timestamp</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">setNotes</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> newNote <span class="token punctuation">,</span> <span class="token operator">...</span> notes <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Router</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> container <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> header</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> header <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> nav <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> nav-item <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Link</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> nav-link active <span class="token punctuation">'</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> / <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">Notes</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Link</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> header</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Switch</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Route</span> <span class="token attr-name">exact</span> <span class="token attr-name">path</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> /create_note <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> NoteForm</span> <span class="token attr-name">addNote</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> addNote <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Route</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Route</span> <span class="token attr-name">exact</span> <span class="token attr-name">path</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> / <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Notes</span> <span class="token attr-name">notes</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> notes <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Route</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Switch</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Router</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span> |
Add css to src/index.css
file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 5px <span class="token punctuation">;</span> <span class="token property">border</span> <span class="token punctuation">:</span> 1px solid gray <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.notes</span> <span class="token punctuation">{</span> <span class="token property">list-style</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 0px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.note</span> <span class="token punctuation">{</span> <span class="token property">border</span> <span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span> <span class="token punctuation">(</span> 0, 0, 0, 0.2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 5px <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.note-content</span> <span class="token punctuation">{</span> <span class="token property">white-space</span> <span class="token punctuation">:</span> pre-wrap <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.note-createdAt</span> <span class="token punctuation">{</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 0.7em <span class="token punctuation">;</span> <span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 0px <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> right <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Run the application using the yarn start
command. We can create notes, but there is no flash message when redirecting to the notes list page. We will add flash message in the following step.
Add flash message
Create src/FlashMessage.jsx
file containing FlashMessage
component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">FlashMessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> flashMessage <span class="token punctuation">,</span> close <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> type <span class="token punctuation">,</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> flashMessage <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">className</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token template-string"><span class="token string">`alert alert-</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> type <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> button <span class="token punctuation">'</span></span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> close <span class="token punctuation">'</span></span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> close <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token punctuation">></span></span> <span class="token plain-text">&times;</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token keyword">null</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> FlashMessage <span class="token punctuation">;</span> |
In the src/Notes.jsx
file, get flashMessage
in the state
of the location
and display:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <span class="token comment">// import thêm useState</span> <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token comment">// import thêm withRouter</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token comment">// import thêm FlashMessage</span> <span class="token keyword">import</span> FlashMessage <span class="token keyword">from</span> <span class="token string">'./FlashMessage'</span> <span class="token punctuation">;</span> <span class="token comment">// lấy thêm location từ props</span> <span class="token keyword">const</span> <span class="token function-variable function">Notes</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> location <span class="token punctuation">,</span> notes <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// lấy flashMessage ra từ state của location</span> <span class="token comment">// nếu không có thì gán bằng object rỗng</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> flashMessage <span class="token punctuation">:</span> fm <span class="token punctuation">}</span> <span class="token operator">=</span> location <span class="token punctuation">.</span> state <span class="token operator">||</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> redirectedFlashMessage <span class="token operator">=</span> fm <span class="token operator">||</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> flashMessage <span class="token punctuation">,</span> setFlashMessage <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> redirectedFlashMessage <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> <span class="token comment">/* hiển thị flash message */</span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> FlashMessage</span> <span class="token attr-name">flashMessage</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> flashMessage <span class="token punctuation">}</span></span> <span class="token attr-name">close</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setFlashMessage</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token plain-text"> ... </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// gói Notes trong higher order component withRouter</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span> <span class="token punctuation">(</span> Notes <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
At NoteForm
‘s submitForm
function, pass another state
when redirecting to /
:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> <span class="token function-variable function">submitForm</span> <span class="token operator">=</span> event <span class="token operator">=></span> <span class="token punctuation">{</span> event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">addNote</span> <span class="token punctuation">(</span> content <span class="token punctuation">)</span> <span class="token punctuation">;</span> history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> flashMessage <span class="token punctuation">:</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> <span class="token string">'success'</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">'Create note successfully!'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Now, when the note has finished creating and redirected to /
, the flash message with the content Create note successfully!
will appear.
Fix the error when pressing the Back button on the browser
After creating notes and redirecting to /
, switch to form to create notes, flash messages will disappear. But if you then click the Back button on the browser, the notes list page will reappear and the flash message will appear again.
The reason for this is that the react-router retrieves the old location from the stack and this location still contains flashMessage
in its state
. The Component Notes
will run the code again to get flashMessage
from the state
of the location
and show the flashMessage again.
In order for the flash message to not show up again like this, we will always delete the flashMessage
in the state
of the location
when we retrieve it. Modify src/Notes.jsx
as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">// import thêm history</span> <span class="token keyword">const</span> <span class="token function-variable function">Notes</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> history <span class="token punctuation">,</span> location <span class="token punctuation">,</span> notes <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> redirectedFlashMessage <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">,</span> search <span class="token punctuation">,</span> state <span class="token punctuation">}</span> <span class="token operator">=</span> location <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> state <span class="token operator">&&</span> state <span class="token punctuation">.</span> flashMessage <span class="token punctuation">)</span> <span class="token punctuation">{</span> redirectedFlashMessage <span class="token operator">=</span> state <span class="token punctuation">.</span> flashMessage <span class="token punctuation">;</span> <span class="token comment">// copy state cũ</span> <span class="token keyword">const</span> clonedState <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> state <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// xóa flashMessage từ state được copy</span> <span class="token keyword">delete</span> clonedState <span class="token punctuation">.</span> flashMessage <span class="token punctuation">;</span> <span class="token comment">// thay thế location hiện tại bằng location mới</span> <span class="token comment">// với pathname, search từ location hiện tại</span> <span class="token comment">// và state đã xóa flashMessage</span> history <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">,</span> search <span class="token punctuation">,</span> state <span class="token punctuation">:</span> clonedState <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
If you try the Back button above, the flash message will not appear again.
Move the flash message handling code into the hook
For ease of reuse, we can move the flash message handling code in the Notes
component into the useFlashMessage
hook. Other components can use this hook to get flashMessage
from the location
and display.
Create src/use_flash_message.jsx
file with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> FlashMessage <span class="token keyword">from</span> <span class="token string">'./FlashMessage'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">useFlashMessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span> location <span class="token punctuation">,</span> history <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> redirectedFlashMessage <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">,</span> search <span class="token punctuation">,</span> state <span class="token punctuation">}</span> <span class="token operator">=</span> location <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> state <span class="token operator">&&</span> state <span class="token punctuation">.</span> flashMessage <span class="token punctuation">)</span> <span class="token punctuation">{</span> redirectedFlashMessage <span class="token operator">=</span> state <span class="token punctuation">.</span> flashMessage <span class="token punctuation">;</span> <span class="token keyword">const</span> clonedState <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> state <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">delete</span> clonedState <span class="token punctuation">.</span> flashMessage <span class="token punctuation">;</span> history <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">,</span> search <span class="token punctuation">,</span> state <span class="token punctuation">:</span> clonedState <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> flashMessage <span class="token punctuation">,</span> setFlashMessage <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> redirectedFlashMessage <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">flashMessageComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> FlashMessage</span> <span class="token attr-name">flashMessage</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> flashMessage <span class="token punctuation">}</span></span> <span class="token attr-name">close</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setFlashMessage</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> flashMessageComponent <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> useFlashMessage <span class="token punctuation">;</span> |
The hook useFlashMessage
will return the flashMessageComponent
function, we can use this function as a component to display the flash message. Edit src/Notes.jsx
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token comment">// bỏ import FlashMessage</span> <span class="token comment">// import useFlashMessage</span> <span class="token keyword">import</span> useFlashMessage <span class="token keyword">from</span> <span class="token string">'./use_flash_message'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Notes</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> history <span class="token punctuation">,</span> location <span class="token punctuation">,</span> notes <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> FlashMessage <span class="token operator">=</span> <span class="token function">useFlashMessage</span> <span class="token punctuation">(</span> location <span class="token punctuation">,</span> history <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> <span class="token comment">/* sửa lại code hiển thị flash message */</span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> FlashMessage</span> <span class="token punctuation">/></span></span> <span class="token plain-text"> ... </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Fragment</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span> <span class="token punctuation">(</span> Notes <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Extend: we can return more flashMessage
, setFlashMessage
from useFlashMessage
to use as an option, such as using setFlashMessage
to display flashMessage with new content right on the current page.
Conclude
Through the theory and examples presented above, hopefully you are having problems displaying flash messages at page turning can refer to smooth problem solving. Thank you for following the article.