{"id":321784,"date":"2021-04-20T15:01:24","date_gmt":"2021-04-20T15:01:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321784"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321784","title":{"rendered":"\u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u0410\u0432\u0442\u043e\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0441\u0435\u0433\u043e\u0434\u043d\u044f, \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0438\u0449\u0435 \u043a\u043e\u0434 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u0435\u0436\u0434\u0435.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/553068\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/aq\/t0\/hd\/aqt0hdhwgmc45nctsfuds7mp2y4.png\"><\/a><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 spread \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/font><\/h2>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0430\u043d\u0442\u0438-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430, \u0441 \u043f\u0440\u0438\u0451\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445, \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d. \u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 spread (<code>{...props}<\/code>) \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u0435\u0442, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u041d\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043a\u043e\u0434\u0435. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0434\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u044d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0438\u0445 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433, \u0438, \u043a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043d\u0438\u0445 \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.<\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u2014 \u0445\u043e\u0440\u043e\u0448\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432\u0441\u0435 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">export const sampleFunction = ({ param1, param2, param3 }) =&gt; { \u00a0\u00a0\u00a0\u00a0console.log({ param1, param2, param3 }); } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440 \u0441\u0432\u043e\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043f\u0435\u0440\u0435\u0434 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439:<\/p>\n<ol>\n<li>\u0412\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b. \u042f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u0430 \u043a \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044e \u043e\u0448\u0438\u0431\u043a\u0438.<\/li>\n<li>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f IntelliSense (\u0432 \u043d\u0430\u0448\u0438 \u0434\u043d\u0438 \u044d\u0442\u043e \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b), \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u044f\u0442\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u2014 \u0442\u043e \u0437\u043d\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0442\u043e, \u043e \u0447\u0451\u043c \u044f \u0445\u043e\u0447\u0443 \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0421\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0431\u043b\u0430\u0433\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">export default function SampleComponent({ onValueChange }) { \u00a0\u00a0\u00a0\u00a0const handleChange = (key) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (e) =&gt; onValueChange(key, e.target.value) \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input onChange={handleChange('name')} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input onChange={handleChange('email')} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input onChange={handleChange('phone')} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0442\u0430\u043a\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0447\u0438\u0441\u0442\u043e\u0442\u0435.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435 \u043f\u0430\u0440\u044b \u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0435\u043a\u043e\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0435, \u044f \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b \u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 \u0437\u0430\u043f\u0438\u0441\u0435\u0439), \u0430 \u043d\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 if\/else.<\/p>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f if\/else:<\/p>\n<pre><code class=\"javascript\">const Student = ({ name }) =&gt; &lt;p&gt;Student name: {name}&lt;\/p&gt; const Teacher = ({ name }) =&gt; &lt;p&gt;Teacher name: {name}&lt;\/p&gt; const Guardian = ({ name }) =&gt; &lt;p&gt;Guardian name: {name}&lt;\/p&gt;  export default function SampleComponent({ user }) { \u00a0\u00a0\u00a0\u00a0let Component = Student; \u00a0\u00a0\u00a0\u00a0if (user.type === 'teacher') { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Component = Teacher \u00a0\u00a0\u00a0\u00a0} else if (user.type === 'guardian') { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Component = Guardian \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Component name={user.name} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u2014 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">import React from 'react'  const Student = ({ name }) =&gt; &lt;p&gt;Student name: {name}&lt;\/p&gt; const Teacher = ({ name }) =&gt; &lt;p&gt;Teacher name: {name}&lt;\/p&gt; const Guardian = ({ name }) =&gt; &lt;p&gt;Guardian name: {name}&lt;\/p&gt;  const COMPONENT_MAP = { \u00a0\u00a0\u00a0\u00a0student: Student, \u00a0\u00a0\u00a0\u00a0teacher: Teacher, \u00a0\u00a0\u00a0\u00a0guardian: Guardian }  export default function SampleComponent({ user }) { \u00a0\u00a0\u00a0\u00a0const Component = COMPONENT_MAP[user.type]  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Component name={user.name} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438\u0445 \u043a\u043e\u0434\u0430. \u042d\u0442\u043e, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0437\u0430\u043f\u0438\u0441\u0435\u0439.<\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u0444\u043e\u0440\u043c\u043b\u044f\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0445\u0443\u043a\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435\u00a0<\/font><\/h2>\n<p>  \u042f \u0441\u0447\u0438\u0442\u0430\u044e \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c \u0441 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u0433\u0434\u0430 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u043c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0445\u0443\u043a\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0438\u043c \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0423\u0434\u0430\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u043a\u043d\u0430, \u0442\u043e\u0441\u0442-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0432\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0445\u0443\u043a\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">import ConfirmationDialog from 'components\/global\/ConfirmationDialog';  export default function useConfirmationDialog({ \u00a0\u00a0\u00a0\u00a0headerText, \u00a0\u00a0\u00a0\u00a0bodyText, \u00a0\u00a0\u00a0\u00a0confirmationButtonText, \u00a0\u00a0\u00a0\u00a0onConfirmClick, }) {  \u00a0\u00a0\u00a0\u00a0const [isOpen, setIsOpen] = useState(false);  \u00a0\u00a0\u00a0\u00a0const onOpen = () =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setIsOpen(true); \u00a0\u00a0\u00a0\u00a0};  \u00a0  \u00a0\u00a0\u00a0\u00a0const Dialog = useCallback( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0() =&gt; ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ConfirmationDialog \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0headerText={headerText} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bodyText={bodyText} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isOpen={isOpen} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onConfirmClick={onConfirmClick} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onCancelClick={() =&gt; setIsOpen(false)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0confirmationButtonText={confirmationButtonText} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[isOpen] \u00a0\u00a0\u00a0\u00a0);  \u00a0\u00a0\u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Dialog, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onOpen, \u00a0\u00a0\u00a0\u00a0};  } <\/code><\/pre>\n<p>  \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0445\u0443\u043a\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import React from &quot;react&quot;; import { useConfirmationDialog } from '.\/useConfirmationDialog'  function Client() { \u00a0\u00a0const { Dialog, onOpen } = useConfirmationDialog({ \u00a0\u00a0\u00a0\u00a0headerText: &quot;Delete this record?&quot;, \u00a0\u00a0\u00a0\u00a0bodyText: \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;Are you sure you want to delete this record? This cannot be undone.&quot;, \u00a0\u00a0\u00a0\u00a0confirmationButtonText: &quot;Delete&quot;, \u00a0\u00a0\u00a0\u00a0onConfirmClick: handleDeleteConfirm, \u00a0\u00a0});  \u00a0\u00a0function handleDeleteConfirm() { \u00a0\u00a0\u00a0\u00a0\/\/TODO: \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u00a0\u00a0}  \u00a0\u00a0const handleDeleteClick = () =&gt; { \u00a0\u00a0\u00a0\u00a0onOpen(); \u00a0\u00a0};  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Dialog \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleDeleteClick} \/&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0); }  export default Client; <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043e\u0431\u044a\u0451\u043c\u043e\u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0445\u0443\u043a\u0430\u0445 React \u2014 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/isamatov.com\/useful-react-hooks\/\">\u044d\u0442\u043e\u0442<\/a> \u043c\u043e\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b.<\/p>\n<h2><font color=\"#3AC1EF\">\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438<\/font><\/h2>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0440\u0438 \u0441\u043e\u0432\u0435\u0442\u0430 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u044b \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438. \u041e\u043f\u044b\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u0435, \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0451\u0440\u0442\u043e\u043a<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u2014 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043a\u0430\u0436\u0434\u044b\u043c \u0438\u0437 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0434\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 drag-and-drop.<\/p>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e drag-and-drop \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/github.com\/atlassian\/react-beautiful-dnd\">react-beautiful-dnd<\/a>:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { DragDropContext, Droppable } from 'react-beautiful-dnd';  \u00a0 export default function DraggableSample() { \u00a0\u00a0\u00a0\u00a0function handleDragStart(result) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ result }); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0function handleDragUpdate({ destination })\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ destination }); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0const handleDragEnd = ({ source, destination }) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ source, destination }); \u00a0\u00a0\u00a0\u00a0};  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;DragDropContext \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragEnd={handleDragEnd} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragStart={handleDragStart} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragUpdate={handleDragUpdate} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Droppable droppableId=&quot;droppable&quot; direction=&quot;horizontal&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{(provided) =&gt; ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div {...provided.droppableProps} ref={provided.innerRef}&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{columns.map((column, index) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ColumnComponent \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0key={index} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0column={column} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Droppable&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/DragDropContext&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0438 drag-and-drop-\u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0451\u0440\u0442\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">import React from 'react'  export default function DraggableSample() { \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;DragWrapper&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{columns.map((column, index) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ColumnComponent \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0key={index} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0column={column} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/DragWrapper&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u2014 \u043a\u043e\u0434 \u043e\u0431\u0451\u0440\u0442\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { DragDropContext, Droppable } from 'react-beautiful-dnd';  export default function DragWrapper({children}) { \u00a0\u00a0\u00a0\u00a0function handleDragStart(result) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ result }); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0function handleDragUpdate({ destination }) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ destination }); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0const handleDragEnd = ({ source, destination }) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log({ source, destination }); \u00a0\u00a0\u00a0\u00a0};  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;DragDropContext \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragEnd={handleDragEnd} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragStart={handleDragStart} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onDragUpdate={handleDragUpdate} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Droppable droppableId=&quot;droppable&quot; direction=&quot;horizontal&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{(provided) =&gt; ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div {...provided.droppableProps} ref={provided.innerRef}&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Droppable&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/DragDropContext&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0447\u0435\u0441\u0442\u044c \u0438 \u0432 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u0434\u0430\u0447\u0443 \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0410 \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0443 drag-and-drop, \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435-\u043e\u0431\u0451\u0440\u0442\u043a\u0435. \u0421 \u043a\u043e\u0434\u043e\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0436\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439<\/font><\/h3>\n<p>  \u0422\u0443\u0442 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043c\u043e\u0451\u043c \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<p>  \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 React \u00ab\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439\u00bb \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b \u0437\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0442 \u0442\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u041f\u0430\u0442\u0442\u0435\u0440\u043d \u00ab\u0445\u0443\u043a\u00bb \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0434\u0435\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439. \u041c\u043e\u0436\u043d\u043e \u0438 \u0434\u0430\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 \u0445\u0443\u043a\u0438 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0435\u043a\u0438\u043c\u0438 API \u0438\u043b\u0438 \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { someAPICall } from '.\/API' import ItemDisplay from '.\/ItemDisplay'  export default function SampleComponent() { \u00a0\u00a0\u00a0\u00a0const [data, setData] = useState([])  \u00a0\u00a0\u00a0\u00a0useEffect(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0someAPICall().then((result) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setData(result) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0}, [])  \u00a0\u00a0\u00a0\u00a0function handleDelete() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Delete!'); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0function handleAdd() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Add!'); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0const handleEdit = () =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Edit!'); \u00a0\u00a0\u00a0\u00a0};  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.map(item =&gt; &lt;ItemDisplay item={item} \/&gt;)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleDelete} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleAdd} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleEdit} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430, \u0432 \u0445\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0433\u043e \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e \u2014 \u0432\u043e\u0442 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import ItemDisplay from '.\/ItemDisplay'  export default function SampleComponent() { \u00a0\u00a0\u00a0\u00a0const { data, handleDelete, handleEdit, handleAdd } = useCustomHook()  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.map(item =&gt; &lt;ItemDisplay item={item} \/&gt;)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleDelete} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleAdd} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleEdit} \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u2014 \u043a\u043e\u0434 \u0445\u0443\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">import { someAPICall } from '.\/API'  export const useCustomHook = () =&gt; { \u00a0\u00a0\u00a0\u00a0const [data, setData] = useState([])  \u00a0\u00a0\u00a0\u00a0useEffect(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0someAPICall().then((result) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setData(result) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0}, [])  \u00a0\u00a0\u00a0\u00a0function handleDelete() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Delete!'); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0function handleAdd() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Add!'); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0const handleEdit = () =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Edit!'); \u00a0\u00a0\u00a0\u00a0};  \u00a0\u00a0\u00a0\u00a0return { handleEdit, handleAdd, handleDelete, data } } <\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/font><\/h3>\n<p>  \u0427\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u043f\u0438\u0448\u0443\u0442 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import React from 'react'  export default function SampleComponent({ data }) {  \u00a0\u00a0\u00a0\u00a0export const ItemDisplay = ({ name, date }) =&gt; ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;&lt;font color=&quot;#3AC1EF&quot;&gt;\u258d{name}&lt;\/font&gt;&lt;\/h3&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;{date}&lt;\/p&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.map(item =&gt; &lt;ItemDisplay item={item} \/&gt;)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0) } <\/code><\/pre>\n<p>  \u0418, \u0445\u043e\u0442\u044f \u0442\u0443\u0442 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0443\u0436\u0430\u0441\u043d\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e, \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u0423 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f <code>ItemDisplay<\/code> \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043c\u0438\u043d\u0443\u0441\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043b\u044e\u0441\u043e\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e, \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043a\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0430\u0431\u0435\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0418\u0445, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043b\u0435\u0433\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0442\u043e\u0433\u0438<\/font><\/h2>\n<p>  \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u0432\u0434\u0443\u043c\u0447\u0438\u0432\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u0435\u043b\u0443 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u0438 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432. \u0425\u043e\u0440\u043e\u0448\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0430 \u0430\u043d\u0442\u0438-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u043a\u043e\u0434 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0442\u0443\u0442 \u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043c\u043d\u0435 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043e\u043d\u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0438 \u0432\u0430\u043c.<\/p>\n<p>  \u0427\u0442\u043e \u0432\u044b \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b\u0438 \u0431\u044b \u0442\u0435\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u0441\u0432\u043e\u0438\u0445 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0438\u0449\u0435?<\/p>\n<p>  <a href=\"http:\/\/ruvds.com\/ru-rub?utm_source=habr&amp;utm_medium=perevod&amp;utm_campaign=prostye_sovety_po_napisaniyu_chistogo_koda_react_komponentov\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ou\/g5\/kh\/oug5kh6sjydt9llengsiebnp40w.png\"><\/a><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/553068\/\"> https:\/\/habr.com\/ru\/company\/ruvds\/blog\/553068\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u0410\u0432\u0442\u043e\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0441\u0435\u0433\u043e\u0434\u043d\u044f, \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0438\u0449\u0435 \u043a\u043e\u0434 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u0435\u0436\u0434\u0435.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/553068\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/aq\/t0\/hd\/aqt0hdhwgmc45nctsfuds7mp2y4.png\"><\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-321784","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321784"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321784\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=321784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=321784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}