{"id":3153,"date":"2021-12-25T14:25:27","date_gmt":"2021-12-25T20:25:27","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=3153"},"modified":"2024-04-19T14:39:48","modified_gmt":"2024-04-19T20:39:48","slug":"crear-buscador-criptomonedas-redux-parte-1","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/crear-buscador-criptomonedas-redux-parte-1\/","title":{"rendered":"How to create a cryptocurrency search engine with Redux, part 1"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>En esta publicaci\u00f3n veremos como utilizar <strong>redux<\/strong> para obtener datos de una API. Con estos datos obtenidos vamos a llenar una lista de criptomonedas y agregar un buscador. <\/p>\n\n\n\n<p>Para comprender el contenido debes de saber lo que es redux y sus principios. Si quieres m\u00e1s informaci\u00f3n fundamental sobre como usar redux, puedes revisar estas publicaciones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pensemosweb.com\/en\/como-empezar-con-redux-en-7-minutos\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00bfC\u00f3mo empezar con Redux en 7 minutos?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pensemosweb.com\/en\/usecontext-y-usereducer-replicar-redux\/\" target=\"_blank\" rel=\"noreferrer noopener\">useContext and useReducer. How to replicate redux?<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 queremos lograr?<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/buscador-parte-1-terminada.jpg\" alt=\"Buscador parte 1 terminada\" class=\"wp-image-3213\"\/><figcaption class=\"wp-element-caption\">Buscador parte 1 terminada<\/figcaption><\/figure>\n\n\n\n<p>En la imagen tenemos un campo de b\u00fasqueda y una lista con todos los mercados disponibles. Puedes crear un proyecto de React en <a href=\"https:\/\/codesandbox.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">codesandbox.io<\/a>.<\/p>\n\n\n\n<p>Aqu\u00ed puedes ver como debe funcionar el buscador en esta primera parte.<\/p>\n\n\n\n<p><a href=\"https:\/\/b8lxc.csb.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/b8lxc.csb.app\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Primera iteraci\u00f3n, datos en duro en los componentes<\/h2>\n\n\n\n<p>La idea de empezar con los datos en duro es conocer el formato de lo que responde la API y como esos datos los queremos encajar en los componentes visuales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo son los datos de la respuesta del API?<\/h3>\n\n\n\n<p>Primero revisemos la forma de los datos que regresa la API. Estos datos son tomados de <a href=\"https:\/\/bitso.com\/api\/v3\/ticker?book=all\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>. M\u00e1s adelante simularemos la petici\u00f3n al API para facilitar el desarrollo.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"{  &quot;success&quot;: true,  &quot;payload&quot;: [    {      &quot;high&quot;: &quot;1031000.00&quot;,      &quot;last&quot;: &quot;1007500.03&quot;,      &quot;created_at&quot;: &quot;2021-12-22T18:51:21+00:00&quot;,      &quot;book&quot;: &quot;btc_mxn&quot;,      &quot;volume&quot;: &quot;85.76293860&quot;,      &quot;vwap&quot;: &quot;1015844.0131800048&quot;,      &quot;low&quot;: &quot;1003978.08&quot;,      &quot;ask&quot;: &quot;1007766.40&quot;,      &quot;bid&quot;: &quot;1007500.03&quot;,      &quot;change_24&quot;: &quot;-1808.15&quot;    },    ...  }}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">success<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">: <\/span><span style=\"color: #FF9CAC\">true<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">payload<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">: [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">high<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1031000.00<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">last<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1007500.03<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">created_at<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">2021-12-22T18:51:21+00:00<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">book<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">btc_mxn<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">volume<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">85.76293860<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">vwap<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1015844.0131800048<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">low<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1003978.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">ask<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1007766.40<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">bid<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1007500.03<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">change_24<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">-1808.15<\/span><span style=\"color: #89DDFF\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Vamos a crear la interfaz pensando en los datos mostrados y componentes, de momento se me ocurre una tabla donde estar\u00e1n listados los detalles del mercado y un campo de b\u00fasqueda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Componente CryptoMarkets<\/h3>\n\n\n\n<p>Entonces agregamos un componente contenedor <code>\/src<\/code>\/<code>CrytoMarkets\/CryptoMarkets.js<\/code>. En este componente contenedor vivir\u00e1n los dos componentes antes mencionados,  uno para hacer la b\u00fasqueda y otro para la tabla donde se listaran los mercados y el resultado de la b\u00fasqueda.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export default function CryptoMarkets() {  return (    &lt;&gt;      &lt;SearchField \/&gt;      &lt;Table \/&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Componente SearchField<\/h3>\n\n\n\n<p>Creamos el componente <strong>SearchField<\/strong> in <code>\/src\/CryptoMarkets\/SearchField.js<\/code><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export default function SearchField({ label }) {  return (    &lt;label&gt;      {label}      &lt;input type=&quot;search&quot; \/&gt;    &lt;\/label&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">SearchField<\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">label<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">label<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">input<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">type<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">search<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Componente Table<\/h3>\n\n\n\n<p>Y el componente <strong>Table<\/strong> in <code>\/src<\/code>\/<code>CryptoMarkets\/Table.js<\/code><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;export default function Table() {  return (    &lt;div&gt;      &lt;div className={styles.row}&gt;        &lt;p&gt;Mercado&lt;\/p&gt;        &lt;p&gt;Moneda&lt;\/p&gt;        &lt;p&gt;\u00daltimo precio&lt;\/p&gt;        &lt;p&gt;Volumen&lt;\/p&gt;        &lt;p&gt;Precio m\u00e1s alto&lt;\/p&gt;        &lt;p&gt;Precio m\u00e1s bajo&lt;\/p&gt;        &lt;p&gt;Variaci\u00f3n 24hrs&lt;\/p&gt;        &lt;p&gt;Cambio 24hrs&lt;\/p&gt;      &lt;\/div&gt;      &lt;div className={styles.row}&gt;        &lt;p&gt;btc\/mxn&lt;\/p&gt;        &lt;p&gt;btc&lt;\/p&gt;        &lt;p&gt;1007500.03&lt;\/p&gt;        &lt;p&gt;85.76293860&lt;\/p&gt;        &lt;p&gt;1031000.00&lt;\/p&gt;        &lt;p&gt;1003978.08&lt;\/p&gt;        &lt;p&gt;1015844.01&lt;\/p&gt;        &lt;p&gt;-1808.15&lt;\/p&gt;      &lt;\/div&gt;      &lt;div&gt;        &lt;p&gt;eth\/btc&lt;\/p&gt;        &lt;p&gt;eth&lt;\/p&gt;        &lt;p&gt;0.08&lt;\/p&gt;        &lt;p&gt;52.02866824&lt;\/p&gt;        &lt;p&gt;0.08&lt;\/p&gt;        &lt;p&gt;0.08&lt;\/p&gt;        &lt;p&gt;0.08&lt;\/p&gt;        &lt;p&gt;-0.00040000&lt;\/p&gt;&lt;\/div&gt;    &lt;\/div&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">Table<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Mercado<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Moneda<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">\u00daltimo precio<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Volumen<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Precio m\u00e1s alto<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Precio m\u00e1s bajo<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Variaci\u00f3n 24hrs<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Cambio 24hrs<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">btc\/mxn<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">btc<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">1007500.03<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">85.76293860<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">1031000.00<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">1003978.08<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">1015844.01<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">-1808.15<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">eth\/btc<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">eth<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">0.08<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">52.02866824<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">0.08<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">0.08<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">0.08<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">-0.00040000<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Y para que se vea como una tabla le agregamos los siguientes estilos en <code>\/src\/CrytoMarkets\/Table.module.scss<\/code>. Los estilos no es tema de esta publicaci\u00f3n as\u00ed que no le tomes mucha importancia por el momento, en caso de que se te compliquen. <\/p>\n\n\n\n<p>Lo \u00fanico es que si no est\u00e1s haciendo el buscador en codesandbox y te sale alg\u00fan problema con los estilos en <strong>sass<\/strong>, instala la librer\u00eda de la siguiente forma.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add sass<\/code><\/pre>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".row {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  border-bottom: 1px solid #eee;  &amp;:hover {    background-color: #efefef;  }  &amp;:last-child  {    border-bottom: none;  }}.header:hover {  background-color: initial;}.item {  word-wrap: break-word;  padding: 8px;  &amp;:first-child {    text-transform: uppercase;  }}.highlight {  font-weight: bold;}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">display<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">grid<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">grid<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">template<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">columns<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">repeat<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">auto<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">fit<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">minmax<\/span><span style=\"color: #F07178\">(100<\/span><span style=\"color: #BABED8\">px<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> 1<\/span><span style=\"color: #BABED8\">fr<\/span><span style=\"color: #F07178\">))<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">border<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">bottom<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 1<\/span><span style=\"color: #BABED8\">px<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">solid<\/span><span style=\"color: #F07178\"> #<\/span><span style=\"color: #BABED8\">eee<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">&amp;<\/span><span style=\"color: #F07178\">:<\/span><span style=\"color: #BABED8\">hover<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #BABED8\">background<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">color<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> #<\/span><span style=\"color: #BABED8\">efefef<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">&amp;<\/span><span style=\"color: #F07178\">:<\/span><span style=\"color: #BABED8\">last<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">child<\/span><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #BABED8\">border<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">bottom<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">none<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">header:hover <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">background<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">color<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">initial<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">word<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">wrap<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">break<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">word<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">padding<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 8<\/span><span style=\"color: #BABED8\">px<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">&amp;<\/span><span style=\"color: #F07178\">:<\/span><span style=\"color: #BABED8\">first<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">child<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #BABED8\">text<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">transform<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">uppercase<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">font<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">weight<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">bold<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En la tabla podemos notar que los <code>divs<\/code> que contiene los datos y el <code>div<\/code> del encabezado son muy similares, dentro se encuentran varios p\u00e1rrafos conteniendo cada pedazo de informaci\u00f3n. As\u00ed que crearemos un componente que hago eso, lo que contiene cada fila de la tabla.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Componente TableRow<\/h3>\n\n\n\n<p><code>\/src\/CryptoMarkets\/TableRow.js<\/code><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export default function TableRow({ items, className}) {  return (    &lt;div className={className}&gt;      {items.map((item, index) =&gt;        &lt;p key={index} className={item.className}&gt;          {item.value}        &lt;\/p&gt;      )}    &lt;\/div&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">TableRow<\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">items<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">className<\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">className<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">items<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">map<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">item<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">index<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">key<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">index<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">className<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">          <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">value<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      )<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Usando datos dummies.js<\/h3>\n\n\n\n<p>Dentro del componente <strong>Table<\/strong> agregamos dos arreglos, uno para el <strong>header<\/strong> de la tabla y otro para una <strong>fila<\/strong> de la tabla. Como mencionamos antes, el header y las filas son muy similares, as\u00ed que reutilizamos el mismo componente <strong>TableRow<\/strong> para generarlos. <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;import TableRow from &quot;.\/TableRow&quot;;const headers = [  { value: &quot;MERCADO&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Moneda&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;\u00daltimo precio&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Volumen&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Precio m\u00e1s alto&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Precio m\u00e1s bajo&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Variaci\u00f3n 24hrs&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Cambio 24hrs&quot;, className: `${styles.item} ${styles.highlight}` }];const row = [  { value: &quot;BTC\/MXN&quot;, className: styles.item },  { value: &quot;btc&quot;, className: styles.item },  { value: &quot;1007500.03&quot;, className: styles.item },  { value: &quot;85.76293860&quot;, className: styles.item },  { value: &quot;1031000.00&quot;, className: styles.item },  { value: &quot;1003978.08&quot;, className: styles.item },  { value: &quot;1015844.01&quot;, className: styles.item },  { value: &quot;-1808.15&quot;, className: styles.item }];export default function Table() {  return (    &lt;div&gt;      &lt;TableRow items={headers} className={`${styles.row} ${styles.header}`} \/&gt;      &lt;TableRow items={row} className={styles.row} \/&gt;    &lt;\/div&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> TableRow <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/TableRow<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> headers <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">MERCADO<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Moneda<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u00daltimo precio<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Volumen<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Precio m\u00e1s alto<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Precio m\u00e1s bajo<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Variaci\u00f3n 24hrs<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Cambio 24hrs<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">]<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> row <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">BTC\/MXN<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">btc<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1007500.03<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">85.76293860<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1031000.00<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1003978.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1015844.01<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">-1808.15<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">]<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">Table<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">header<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Como te puedes dar cuenta el componente <strong>TableRow<\/strong> recibe <strong><code>items<\/code><\/strong> and <strong><code>className<\/code><\/strong> como propiedades, para que el <strong>header<\/strong> de la table no tenga el efecto del estilo <code>:hover<\/code> agregamos la clase <code>.header<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Generando filas din\u00e1micamente y dummies separados.<\/h3>\n\n\n\n<p>Primero separamos los dummies y les damos forma.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;export const headers = [  { value: &quot;MERCADO&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Moneda&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;\u00daltimo precio&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Volumen&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Precio m\u00e1s alto&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Precio m\u00e1s bajo&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Variaci\u00f3n 24hrs&quot;, className: `${styles.item} ${styles.highlight}` },  { value: &quot;Cambio 24hrs&quot;, className: `${styles.item} ${styles.highlight}` }];export const rows = [  {    id: &quot;btc\/mxn&quot;,    className: styles.row,    items: [      { value: &quot;btc\/mxn&quot;, className: styles.item },      { value: &quot;btc&quot;, className: styles.item },      { value: &quot;1007500.03&quot;, className: styles.item },      { value: &quot;85.76293860&quot;, className: styles.item },      { value: &quot;1031000.00&quot;, className: styles.item },      { value: &quot;1003978.08&quot;, className: styles.item },      { value: &quot;1015844.01&quot;, className: styles.item },      { value: &quot;-1808.15&quot;, className: styles.item }    ]  },  {    id: 2,    className: styles.row,    items: [      { value: &quot;eth\/btc&quot;, className: styles.item },      { value: &quot;eth&quot;, className: styles.item },      { value: &quot;0.08&quot;, className: styles.item },      { value: &quot;52.02866824&quot;, className: styles.item },      { value: &quot;0.08&quot;, className: styles.item },      { value: &quot;0.08&quot;, className: styles.item },      { value: &quot;0.08&quot;, className: styles.item },      { value: &quot;-0.00040000&quot;, className: styles.item }    ]  }];\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> headers <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">MERCADO<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Moneda<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u00daltimo precio<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Volumen<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Precio m\u00e1s alto<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Precio m\u00e1s bajo<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Variaci\u00f3n 24hrs<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Cambio 24hrs<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">highlight<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">]<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> rows <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">id<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">btc\/mxn<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">items<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">btc\/mxn<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">btc<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1007500.03<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">85.76293860<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1031000.00<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1003978.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">1015844.01<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">-1808.15<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    ]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">id<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">items<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">eth\/btc<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">eth<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">0.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">52.02866824<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">0.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">0.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">0.08<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">-0.00040000<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    ]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">]<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Luego utilizamos esos dummies en instancias del componente <strong>TableRow<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;import TableRow from &quot;.\/TableRow&quot;;import { headers, rows } from &quot;.\/dummies&quot;;export default function Table() {  return (    &lt;div&gt;      &lt;TableRow items={headers} className={`${styles.row} ${styles.header}`} \/&gt;      {rows.map((row) =&gt; (        &lt;TableRow key={row.id} items={row.items} className={row.className} \/&gt;      ))}    &lt;\/div&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> TableRow <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/TableRow<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/dummies<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">Table<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">header<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">map<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">row<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">key<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">items<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">className<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      ))<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Usamos el nombre del mercado como el <code>id<\/code> porque es un dato que no se puede repetir. En este punto debemos tener algo as\u00ed:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/buscador-con-dummies.jpg\" alt=\"Buscador con dummies\" class=\"wp-image-3201\"\/><figcaption class=\"wp-element-caption\">Buscador con dummies<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Segunda Iteraci\u00f3n, agregando Redux<\/h2>\n\n\n\n<p>Para usar redux, necesitamos instalar la librer\u00eda <strong><code>redux<\/code><\/strong> y para facilitar su uso en React instalamos tambi\u00e9n <code><strong>react-redux<\/strong><\/code>. Desde condesandbox puedes agregar estas dependencias en la parte inferior izquierda del editor donde dice &#8220;<strong>Dependencies<\/strong>&#8220;.<\/p>\n\n\n\n<p>En tu computadora local corre el siguiente comando.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"yarn add redux react-redux\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">yarn add redux react<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">redux<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En este punto ya sabemos la forma en que necesitamos los datos, la tabla necesita unos <code><strong>headers<\/strong><\/code> y una lista de filas con valores (<strong><code>rows<\/code><\/strong>).<\/p>\n\n\n\n<p>Adem\u00e1s, necesitamos crear un <strong><code>store<\/code><\/strong> que sea accesible desde cualquier parte de nuestra aplicaci\u00f3n. El principal insumo que necesita el <code>store<\/code> es un <code>reducer<\/code>. A\u00fan no obtendremos los datos de los mercados de la API, utilizaremos de momento los datos del archivo <code>\/src\/CryptoMarkets\/dummies.js<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurando inicialmente el store<\/h3>\n\n\n\n<p>Crearemos un archivo nuevo <code>\/configureStore.js<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { createStore } from &quot;redux&quot;;import { headers, rows as markets } from &quot;.\/CryptoMarkets\/dummies&quot;;const initialState = {  headers,  markets};export default function configureStore() {  return createStore((state, action) =&gt; state, initialState);}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">createStore<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">as<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">markets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/CryptoMarkets\/dummies<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> initialState <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  headers<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  markets<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">configureStore<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">createStore<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8; font-style: italic\">action<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">initialState<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Importamos la funci\u00f3n <code>createStore<\/code> que recibe una funci\u00f3n reducer y opcionalmente un estado inicial. La funci\u00f3n reducer de momento solo regresar\u00e1 el estado inicial tal cual, como sabemos, en redux las funciones reducers reciben un estado y una acci\u00f3n. Como segundo par\u00e1metro opcional le pasamos los datos <strong>dummies<\/strong>.<\/p>\n\n\n\n<p>The function <code>configureStore<\/code> la utilizaremos a continuaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hacer al store accesible<\/h3>\n\n\n\n<p>Para que cualquier componente pueda acceder al store es necesario crear un contexto global, esto normalmente se realiza con <code>React.createContext()<\/code> y usando su componente <code>Context.Provider<\/code>. Por suerte la librer\u00eda <code>react-redux<\/code> ya cuenta con este funcionamiento y podemos utilizar su propio componente <code>Provider<\/code>.<\/p>\n\n\n\n<p>Si tienes curiosidad como usar el Context de React, puedes revisar esta publicaci\u00f3n:<\/p>\n\n\n\n<p><a href=\"https:\/\/pensemosweb.com\/en\/usecontext-y-usereducer-replicar-redux\/\" target=\"_blank\" rel=\"noreferrer noopener\">useContext y useReducer, \u00bfC\u00f3mo replicar redux?<\/a><\/p>\n\n\n\n<p>Aplicamos el <code>Provider<\/code> de react-redux en nuestra aplicaci\u00f3n de la siguiente forma. En nuestro archivo <strong><code>\/index.js<\/code><\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { StrictMode } from &quot;react&quot;;import ReactDOM from &quot;react-dom&quot;;import { Provider } from &quot;react-redux&quot;;import App from &quot;.\/App&quot;;import configureStore from &quot;.\/configureStore&quot;;const store = configureStore();const rootElement = document.getElementById(&quot;root&quot;);ReactDOM.render(  &lt;StrictMode&gt;    &lt;Provider store={store}&gt;      &lt;App \/&gt;    &lt;\/Provider&gt;  &lt;\/StrictMode&gt;,  rootElement);\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">StrictMode<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> ReactDOM <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-dom<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">Provider<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> App <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/App<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> configureStore <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/configureStore<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> store <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">configureStore<\/span><span style=\"color: #BABED8\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> rootElement <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> document<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getElementById<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">root<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">ReactDOM<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">render<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">StrictMode<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Provider<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">store<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">store<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">App<\/span><span style=\"color: #89DDFF\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #FFCB6B\">Provider<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #FFCB6B\">StrictMode<\/span><span style=\"color: #89DDFF\">&gt;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  rootElement<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Al componente Provider debemos pasarle una propiedad <code>store<\/code>. Esa propiedad es el store generado por la funci\u00f3n <code>configureStore<\/code> que creamos en la secci\u00f3n anterior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acceder al store desde el componente contenedor CryptoMarkets<\/h3>\n\n\n\n<p>Ahora que ya tenemos el <strong><code>store<\/code><\/strong> listo para usarse, vamos a obtener el estado para mostrar el listado de markets en el componente <strong><code>Table<\/code><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import Table from &quot;.\/Table&quot;;import SearchField from &quot;.\/SearchField&quot;;import { useSelector } from &quot;react-redux&quot;;export default function CryptoMarkets() {  const headers = useSelector((state) =&gt; state.headers);  const rows = useSelector((state) =&gt; state.markets);  return (    &lt;&gt;      &lt;SearchField&gt;&lt;\/SearchField&gt;      &lt;Table headers={headers} rows={rows}&gt;&lt;\/Table&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> Table <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> SearchField <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useSelector<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">markets<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\">&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">headers<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">rows<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">}&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Usamos lo que en redux llaman <strong>selectors<\/strong>, los cuales son funciones que acceden a una parte especifica del estado para facilitar su acceso. Se usa el &#8220;custom hook&#8221; <strong><code>useSelector<\/code><\/strong> of <code>react-redux<\/code> para invocar las funciones selectoras. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Componente Table recibe headers y rows como propiedades<\/h3>\n\n\n\n<p>Finalmente, el componente <strong><code>Table<\/code><\/strong> debe poder recibir las propiedades <strong><code>headers<\/code><\/strong> and <strong><code>rows<\/code><\/strong> en lugar de importarlos del <code>dummies.js<\/code><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;import TableRow from &quot;.\/TableRow&quot;;export default function Table({ rows, headers }) {  return (    &lt;div&gt;      &lt;TableRow items={headers} className={`${styles.row} ${styles.header}`} \/&gt;      {rows.map((row) =&gt; (        &lt;TableRow key={row.id} items={row.items} className={row.className} \/&gt;      ))}    &lt;\/div&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> TableRow <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/TableRow<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">Table<\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">rows<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">headers<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #89DDFF\">`${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #C3E88D\"> <\/span><span style=\"color: #89DDFF\">${<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">header<\/span><span style=\"color: #89DDFF\">}`<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">map<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">row<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">TableRow<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">key<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">items<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">items<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">className<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      ))<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>El resultado deber\u00e1 ser el mismo de la primera iteraci\u00f3n, pero con los datos obtenidos del store<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/buscador-con-dummies.jpg\" alt=\"Buscador con dummies\" class=\"wp-image-3201\"\/><figcaption class=\"wp-element-caption\">Buscador con dummies<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Implementar la busqueda de mercados<\/h3>\n\n\n\n<p>La b\u00fasqueda que vamos a implementar ser\u00e1 por el nombre del mercado. As\u00ed que bas\u00e1ndonos en los datos del archivo <code>\/src<\/code>\/<code>CrytoMarkets\/dummies.js<\/code>, vamos a modificar nuestra funci\u00f3n reducer para agregar la acci\u00f3n de filtrado.<\/p>\n\n\n\n<p>Creamos el archivo <code>\/src\/CryptyoMarkets\/cryptoMarketsState.js<\/code> donde ahora vivir\u00e1 nuestro reducer, separ\u00e1ndolo del archivo <code>\/configureStore.js<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ state = { headers [], all = [], filtered = []}export default function cryptoMarkets(state, action) {  switch (action.type) {    case &quot;FILTER_MARKETS&quot;:      return {        ...state,        filtered: state.all.filter(          (market) =&gt; market.id.includes(action.payload)        )      };    default:      return state;  }}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ state = { headers [], all = [], filtered = []}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cryptoMarkets<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">action<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">switch<\/span><span style=\"color: #F07178\"> (<\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">type<\/span><span style=\"color: #F07178\">) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">case<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">FILTER_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">all<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">filter<\/span><span style=\"color: #F07178\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">          <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">market<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">market<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">includes<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #F07178\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>El comentario muestra la estructura del estado. La estructura s\u00e9 cambio porque necesitamos guardar la lista original de mercados para ser utilizado en cada b\u00fasqueda, de lo contrario filtrar\u00edamos mercados sobre los \u00faltimos filtrados y as\u00ed sucesivamente eliminando todos los mercados. <\/p>\n\n\n\n<p>Una acci\u00f3n es un objeto literal que contiene un tipo y dem\u00e1s datos necesarios para cambiar el estado del store, estos datos los vamos a guardar en una propiedad llamada <code>payload<\/code>.<\/p>\n\n\n\n<p>La acci\u00f3n <code>'FILTERED_MARKETS'<\/code>, filtra todos los <code>markets<\/code> que en su propiedad <strong><code>id<\/code><\/strong> incluyan el texto contenido en <code>payload<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\" state.all.filter(   (market) =&gt; market.id.includes(action.payload) )\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\"> state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">all<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">filter<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">   <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">market<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> market<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">includes<\/span><span style=\"color: #BABED8\">(action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\"> )<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Luego en <code>\/configureStore.js <\/code>reflejamos esa nueva estructura en el <code>initialState<\/code> e importamos nuestra nueva funci\u00f3n <strong>reducer<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { createStore } from &quot;redux&quot;;import { headers, rows as markets } from &quot;.\/CryptoMarkets\/dummies&quot;;import reducer from &quot;.\/CryptoMarkets\/cryptoMarketsState&quot;;const initialState = {  headers,  all: markets,  filtered: markets};export default function configureStore() {  return createStore(reducer, initialState);}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">createStore<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">as<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">markets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/CryptoMarkets\/dummies<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> reducer <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/CryptoMarkets\/cryptoMarketsState<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> initialState <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  headers<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #F07178\">all<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> markets<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #F07178\">filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> markets<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">configureStore<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">createStore<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">reducer<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">initialState<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Disparar acci\u00f3n de filtrado desde el componente CryptoMarkets<\/h3>\n\n\n\n<p>Aunque ya creamos la acci\u00f3n, debemos dispararla cuando el usuario escribe en el campo de b\u00fasqueda, primero vamos a modificar el componente <strong><code>SearchField<\/code><\/strong>. Ahora adem\u00e1s de recibir el <code>label<\/code> como propiedad, tambi\u00e9n la funci\u00f3n que se ejecuta cada vez que el valor de b\u00fasqueda cambia.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export default function SearchField({ label, onSearchChange }) {  return (    &lt;label&gt;      {label}      &lt;input type=&quot;search&quot; onChange={onSearchChange} \/&gt;    &lt;\/label&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">SearchField<\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">label<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">onSearchChange<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">label<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">input<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">type<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">search<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchChange<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>De esta manera dentro del componente CryptoMarkets podemos disparar la acci\u00f3n <code>FILTER_MARKETS<\/code> como sigue.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import Table from &quot;.\/Table&quot;;import SearchField from &quot;.\/SearchField&quot;;import { useSelector, useDispatch } from &quot;react-redux&quot;;export default function CryptoMarkets() {  const dispatch = useDispatch();  const headers = useSelector((state) =&gt; state.headers);  const rows = useSelector((state) =&gt; state.filtered);  function onSearchMarket(e) {    dispatch({ type: &quot;FILTER_MARKETS&quot;, payload: e.target.value });  }  return (    &lt;&gt;      &lt;SearchField onSearchChange={onSearchMarket} \/&gt;      &lt;Table headers={headers} rows={rows}&gt;&lt;\/Table&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> Table <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> SearchField <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useSelector<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useDispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useDispatch<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">filtered<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">onSearchMarket<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">and<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">FILTER_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">and<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">target<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">value<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onSearchChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchMarket<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">headers<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">rows<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">}&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Se usa el &#8220;custom hook&#8221;  <strong><code>useDispatch<\/code><\/strong> of <code>react-redux<\/code> para disparar acciones desde cualquier componente funcional. Este hook regresa una funci\u00f3n <code>dispatch<\/code> que se utiliza para disparar cualquier acci\u00f3n.<\/p>\n\n\n\n<p>Al componente <code>SearchField<\/code> se le pasa la propiedad <code><strong>onSearchChange<\/strong><\/code> donde recibe la funci\u00f3n que invoca la acci\u00f3n cuando el valor del campo de b\u00fasqueda cambia.<\/p>\n\n\n\n<p>El resultado de esta iteraci\u00f3n debe ser algo como lo siguiente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/buscador-implementado.jpg\" alt=\"Buscador implementado\" class=\"wp-image-3205\"\/><figcaption class=\"wp-element-caption\">Buscador implementado<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Refactor, action creator para disparar b\u00fasqueda<\/h3>\n\n\n\n<p>The <code>action creators<\/code> no son m\u00e1s que simples funciones que regresan una acci\u00f3n, y una acci\u00f3n es simplemente un objeto literal con un tipo y datos necesarios para la acci\u00f3n. En esta ocasi\u00f3n vamos a crear el action creator para la acci\u00f3n <code>FILTER_MARKETS<\/code>. En el archivo <code><strong>\/src\/CryptoMarkets\/cryptoMarketsState.js<\/strong><\/code> agregamos al final lo siguiente<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export const searchMarket = (filter) =&gt; ({ type: 'FILTER_MARKETS', payload: filter });\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> searchMarket <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">filter<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> (<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">FILTER_MARKETS<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> filter <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Y ahora en nuestro componente <code><strong>\/src\/CryptoMarkets\/CryptoMarkets.js<\/strong><\/code><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import Table from &quot;.\/Table&quot;;import SearchField from &quot;.\/SearchField&quot;;import { useSelector, useDispatch } from &quot;react-redux&quot;;import { searchMarket } from &quot;.\/cryptoMarketsState&quot;;export default function CryptoMarkets() {  const dispatch = useDispatch();  const headers = useSelector((state) =&gt; state.headers);  const rows = useSelector((state) =&gt; state.filtered);  function onSearchMarket(e) {    dispatch(searchMarket());  }  return (    &lt;&gt;      &lt;SearchField onSearchChange={onSearchMarket} \/&gt;      &lt;Table headers={headers} rows={rows}&gt;&lt;\/Table&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> Table <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> SearchField <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useSelector<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useDispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">searchMarket<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/cryptoMarketsState<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useDispatch<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">filtered<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">onSearchMarket<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">and<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">searchMarket<\/span><span style=\"color: #F07178\">())<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onSearchChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchMarket<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">headers<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">rows<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">}&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Tercera iteraci\u00f3n, obteniendo datos de la API simulada<\/h2>\n\n\n\n<p>En esta iteraci\u00f3n vamos a simular las peticiones del API para dejar de usar los <code>rows<\/code> del archivo <code><strong>\/src\/CryptoMarkets\/dummies.js<\/strong><\/code>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Respuesta json de bitso<\/h3>\n\n\n\n<p>Simplemente en tu navegador pega la siguiente url:<\/p>\n\n\n\n<p><a href=\"https:\/\/bitso.com\/api\/v3\/ticker?book=all\">https:\/\/bitso.com\/api\/v3\/ticker?book=all<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/bitso-ticker-all.jpg\" alt=\"Mercados de bitso\" class=\"wp-image-3207\"\/><figcaption class=\"wp-element-caption\">Mercados de bitso<\/figcaption><\/figure>\n\n\n\n<p>Ahora copia el json que te respondi\u00f3 y p\u00e9galo en un nuevo archivo llamado <code>\/api\/bitso-markets.json<\/code>.<\/p>\n\n\n\n<p>Luego crea un archivo llamado <code>\/api\/index.js<\/code>, ah\u00ed vamos a agregar la funci\u00f3n que simule la petici\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import markets from &quot;.\/bitso-markets.json&quot;;export function fetchMarkets() {  return new Promise((resolve) =&gt; {    setTimeout(() =&gt; resolve(markets), 1000);  });}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> markets <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/bitso-markets.json<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">fetchMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">new<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #FFCB6B\">Promise<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">resolve<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">setTimeout<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">resolve<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">markets<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">1000<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el c\u00f3digo anterior se importa el <code>json<\/code> en una variable llamada <code>markets<\/code> y se crea una promesa con un temporizador de un segundo, despu\u00e9s del segundo la promesa se resuelve retornando los datos de los mercados (contenidos en la variable <code>markets<\/code>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Usar redux-thunk para obtener los markets<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u00bfQu\u00e9 es un thunk?<\/h4>\n\n\n\n<p>Su definici\u00f3n en el \u00e1mbito de programaci\u00f3n en general:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Los thunks se utilizan principalmente para retrasar un c\u00e1lculo hasta que se necesite su resultado.<\/p>\n<cite>https:\/\/en.wikipedia.org\/wiki\/Thunk<\/cite><\/blockquote>\n\n\n\n<p>En <strong>react<\/strong> se utiliza para escribir funciones en redux con l\u00f3gica avanzada relacionadas con el estado de la aplicaci\u00f3n. Donde se puede trabajar con operaciones tanto as\u00edncronas como s\u00edncronas. Estas funciones thunk tienen acceso a las funciones <code>dispatch()<\/code> and <code>getState()<\/code> de redux, por esta raz\u00f3n un thunk internamente puede disparar cualquier numera de acciones y obtener los datos actuales del estado por si son necesarios en su l\u00f3gica de programaci\u00f3n.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Crear un Thunk action creator<\/h4>\n\n\n\n<p>En realidad un thunk se usa como se usan los action creators, por ese se les llama <code>Thunk action creator<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ actionsexport function getMarkets() {  return async (dispatch) =&gt; {    const rawMarkets = await fetchMarkets();    dispatch({ type: &quot;RECEIVE_MARKETS&quot;, payload: rawMarkets.payload });  };}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ actions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">dispatch<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">fetchMarkets<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">RECEIVE_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el codigo de arriba, el action creator regresa una funci\u00f3n as\u00edncrona que recibe solo la funci\u00f3n <code>dispatch<\/code> (no vamos a necesitar la funci\u00f3n <code>getState()<\/code>). La funci\u00f3n comienza pidiendo los markets y una vez obtenidos, dispara la acci\u00f3n <code>RECEIVE_MARKETS<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Actualizar reducer para entender la acci\u00f3n RECEIVE_MARKETS<\/h4>\n\n\n\n<p>En el archivo <code>\/CryptoMarkets\/cryptoMarketsState.js<\/code> agregamos \u00e9l case para la acci\u00f3n <code>RECEIVE_MARKETS<\/code>. El c\u00f3digo de este archivo debe quedar como el de abajo.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { fetchMarkets } from &quot;..\/api&quot;;export default function cryptoMarkets(state, action) {  switch (action.type) {    case &quot;FILTER_MARKETS&quot;:      return {        ...state,        filtered: state.all.filter((market) =&gt;          market.id.includes(action.payload)        )      };    case &quot;RECEIVE_MARKETS&quot;:      return {        ...state,        all: action.payload,        filtered: action.payload,      };    default:      return state;  }}\/\/ actionsexport const searchMarket = (filter) =&gt; ({ type: 'FILTER_MARKETS', payload: filter });export function getMarkets() {  return async (dispatch) =&gt; {    const rawMarkets = await fetchMarkets();    dispatch({ type: &quot;RECEIVE_MARKETS&quot;, payload: rawMarkets.payload });  };}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">fetchMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">..\/api<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cryptoMarkets<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">action<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">switch<\/span><span style=\"color: #F07178\"> (<\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">type<\/span><span style=\"color: #F07178\">) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">case<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">FILTER_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">all<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">filter<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">market<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">          <\/span><span style=\"color: #BABED8\">market<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">includes<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #F07178\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">case<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">RECEIVE_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        all<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ actions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> searchMarket <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">filter<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> (<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">FILTER_MARKETS<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> filter <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">dispatch<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">fetchMarkets<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">RECEIVE_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Hacer que el store entienda las funciones thunk<\/h4>\n\n\n\n<p>Para que el thunk se ejecute correctamente es necesario indicarle al store como tratar este tipo de funciones, para eso necesitamos agregar el middleware de <code>react-thunk<\/code>. Un middleware extiende o mejora la funcionalidad en un punto medio del software o comunica diferentes puntos de la aplicaci\u00f3n, y tambi\u00e9n puede comunicar aplicaciones diferentes. De hecho en redux tambi\u00e9n se les llama <code>enhancers<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { createStore, applyMiddleware } from &quot;redux&quot;;import thunk from &quot;redux-thunk&quot;;import reducer from &quot;.\/CryptoMarkets\/cryptoMarketsState&quot;;import { headers } from &quot;.\/CryptoMarkets\/dummies&quot;;const initialState = {  headers,  all: [],  filtered: [],};export default function configureStore() {  return createStore(reducer, initialState, applyMiddleware(thunk));}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">createStore<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">applyMiddleware<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> thunk <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">redux-thunk<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> reducer <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/CryptoMarkets\/cryptoMarketsState<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/CryptoMarkets\/dummies<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> initialState <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  headers<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #F07178\">all<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> []<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #F07178\">filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> []<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">configureStore<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">createStore<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">reducer<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">initialState<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">applyMiddleware<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">thunk<\/span><span style=\"color: #F07178\">))<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Primero importamos la funci\u00f3n <code>applyMiddleware<\/code>, luego importamos el middleware llamado thunk y finalmente aplicamos el middleware en el terecer parametro de <code>createStore<\/code>.<\/p>\n\n\n\n<p>Tambi\u00e9n cambiamos el <code>initialState<\/code>, los header los dejamos en el archivo <code>dummies.js<\/code>. Las propiedades <code>all<\/code> and <code>filtered<\/code> las cambiamos a array vac\u00edos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Invocando el thunk desde el componente CryptoMarkets<\/h4>\n\n\n\n<p>Por \u00faltimo, necesitamos invocar nuestro thunk para obtener los markets de nuestro servicio simulado. El archivo <code>\/CrytoMarkets\/CryptoMarkets.js<\/code> donde vive el componente padre <code>CryptoMarkets<\/code> debe quedar como el de abajo.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import Table from &quot;.\/Table&quot;;import SearchField from &quot;.\/SearchField&quot;;import { useSelector, useDispatch } from &quot;react-redux&quot;;import { useEffect } from &quot;react&quot;;import { getMarkets, searchMarket } from &quot;.\/cryptoMarketsState&quot;;export default function CryptoMarkets() {  const dispatch = useDispatch();  const headers = useSelector((state) =&gt; state.headers);  const rows = useSelector((state) =&gt; state.filtered);  useEffect(() =&gt; {    dispatch(getMarkets());  }, [dispatch]);  function onSearchMarket(e) {    dispatch(searchMarket(e.target.value));  }  return (    &lt;&gt;      &lt;SearchField onSearchChange={onSearchMarket} \/&gt;      &lt;Table headers={headers} rows={rows}&gt;&lt;\/Table&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> Table <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> SearchField <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useSelector<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useDispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useEffect<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">getMarkets<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">searchMarket<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/cryptoMarketsState<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useDispatch<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">filtered<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #82AAFF\">useEffect<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #F07178\">())<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">},<\/span><span style=\"color: #F07178\"> [<\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\">])<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">onSearchMarket<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">and<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">searchMarket<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">and<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">target<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">value<\/span><span style=\"color: #F07178\">))<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onSearchChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchMarket<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">headers<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">rows<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">}&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Importamos el thunk <code>getMarkets<\/code> y ocupamos el hook <code>useEffect<\/code>. Dentro invocamos a <code>getMarkets()<\/code> para pedir el listado de markets al api simulado.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"useEffect(() =&gt; {    dispatch(getMarkets());  }, [dispatch]);\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #82AAFF\">useEffect<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #F07178\">())<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">},<\/span><span style=\"color: #BABED8\"> [dispatch])<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En este punto nuestra aplicaci\u00f3n nos debe mostrar un error porque el formato de las propiedades de los componentes no son iguales a la respuesta del api, pero podemos agregar un <code>console.log(action)<\/code> en el <strong>reducer<\/strong> para comprobar que el api simulado est\u00e1 respondiendo con los datos.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"case &quot;RECEIVE_MARKETS&quot;:  console.log(action);  return {    ...state,    all: action.payload,    filtered: action.payload  };\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">case<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">RECEIVE_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #BABED8\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(action)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">all<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">filtered<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> action<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>El error debe mostrarse asi:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/error-falta-mapeo.jpg\" alt=\"Error, falta de mapeo\" class=\"wp-image-3211\"\/><figcaption class=\"wp-element-caption\">Error falta de mapeo<\/figcaption><\/figure>\n\n\n\n<p>En la imagen de arriba vemos en la consola que recibimos los datos del API simulado. En la siguiente secci\u00f3n eliminaremos este error mapeando correctamente los datos al formato de como los necesita el componente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mapeando datos a UI<\/h3>\n\n\n\n<p>Para que el error desaparezca, necesitamos mapear los datos obtenidos del servicio a datos que entienda los componentes, para esto creamos el archivo <code>\/mappers.js<\/code> y vamos a crear las funciones de mapeo:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/Table.module.scss&quot;;export function mapMarketsProps(markets) {  return markets.map((market) =&gt; {    const { book, last, high, low, change_24, vwap, volume } = market;    const vwapNum = Number(vwap);    const change24Num = Number(change_24);    return {      currency: book.split(&quot;_&quot;)[0],      market: book.replace(&quot;_&quot;, &quot;\/&quot;),      variation24hrs: vwapNum &gt; 0 ? vwapNum.toFixed(2) : vwap,      change24hrs: change24Num &gt; 0 ? change24Num.toFixed(2) : change_24,      last: Number(last).toFixed(2),      high: Number(high).toFixed(2),      low: Number(low).toFixed(2),      volume: Number(volume).toFixed(2),    };  });}export function mapMarketsToUi(rawMarkets) {  const mappedMarkets = mapMarketsProps(rawMarkets.payload);  return mappedMarkets.map((ticker) =&gt; {    return {      id: ticker.market,      className: styles.row,      items: [        { value: ticker.market, className: styles.item },        { value: ticker.currency, className: styles.item },        { value: ticker.last, className: styles.item },        { value: ticker.volume, className: styles.item },        { value: ticker.high, className: styles.item },        { value: ticker.low, className: styles.item },        { value: ticker.variation24hrs, className: styles.item },        { value: ticker.change24hrs, className: styles.item }      ]    };  });}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">mapMarketsProps<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">markets<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">markets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">map<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">market<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">book<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">last<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">high<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">low<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">change_24<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">vwap<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">volume<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">market<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">vwapNum<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">vwap<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">change24Num<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">change_24<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      currency<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">book<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">split<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">_<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">)[<\/span><span style=\"color: #F78C6C\">0<\/span><span style=\"color: #F07178\">]<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      market<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">book<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">replace<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">_<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\/<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      variation24hrs<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">vwapNum<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">0<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">?<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">vwapNum<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">) <\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">vwap<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      change24hrs<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">change24Num<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">0<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">?<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">change24Num<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">) <\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">change_24<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      last<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">last<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      high<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">high<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      low<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">low<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      volume<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">number<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">volume<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toFixed<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">mapMarketsToUi<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">rawMarkets<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">mappedMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">mapMarketsProps<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">payload<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">mappedMarkets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">map<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">ticker<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      id<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">market<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">row<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      items<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">market<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">currency<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">last<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">volume<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">high<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">low<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">variation24hrs<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">ticker<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">change24hrs<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> className<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">item<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">      ]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Aqu\u00ed ya podemos usar esas funciones de mapeos en nuestro componente contenedor:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import Table from &quot;.\/Table&quot;;import SearchField from &quot;.\/SearchField&quot;;import { useSelector, useDispatch } from &quot;react-redux&quot;;import { useEffect } from &quot;react&quot;;import { getMarkets, searchMarket } from &quot;.\/cryptoMarketsState&quot;;import { mapMarketsToUi } from &quot;..\/mapppers&quot;;export default function CryptoMarkets() {  const dispatch = useDispatch();  const headers = useSelector((state) =&gt; state.headers);  const rows = useSelector((state) =&gt; state.filtered);  useEffect(() =&gt; {    dispatch(getMarkets(mapMarketsToUi));  }, [dispatch]);  function onSearchMarket(e) {    dispatch(searchMarket(e.target.value));  }  return (    &lt;&gt;      &lt;SearchField onSearchChange={onSearchMarket} \/&gt;      &lt;Table headers={headers} rows={rows}&gt;&lt;\/Table&gt;    &lt;\/&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> Table <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/Table<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> SearchField <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useSelector<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useDispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react-redux<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">useEffect<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">react<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">getMarkets<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">searchMarket<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/cryptoMarketsState<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">mapMarketsToUi<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">..\/mapppers<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">CryptoMarkets<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useDispatch<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">useSelector<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">state<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">state<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">filtered<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #82AAFF\">useEffect<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">mapMarketsToUi<\/span><span style=\"color: #F07178\">))<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">},<\/span><span style=\"color: #F07178\"> [<\/span><span style=\"color: #BABED8\">dispatch<\/span><span style=\"color: #F07178\">])<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">onSearchMarket<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">and<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #82AAFF\">searchMarket<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">and<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">target<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">value<\/span><span style=\"color: #F07178\">))<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">SearchField<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onSearchChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchMarket<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">headers<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">headers<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">rows<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">rows<\/span><span style=\"color: #89DDFF\">}&gt;&lt;\/<\/span><span style=\"color: #FFCB6B\">Table<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Y modificamos nuestro thunk de la siguiente forma.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"export function getMarkets(mapToUi) {  return async (dispatch) =&gt; {    const rawMarkets = await fetchMarkets();    const uiMappedMarkets = mapToUi(rawMarkets);    dispatch({ type: &quot;RECEIVE_MARKETS&quot;, payload: uiMappedMarkets });  };}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">getMarkets<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">mapToUi<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">dispatch<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">fetchMarkets<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">uiMappedMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">mapToUi<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">rawMarkets<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #82AAFF\">dispatch<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">RECEIVE_MARKETS<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> payload<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">uiMappedMarkets<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ahora la funci\u00f3n de mapeo es recibida por nuestro thunk, de esta manera, podemos utilizar diferentes mapeos para diferentes tipos de componentes. Imag\u00ednate que tenemos otra pantalla donde necesitamos mostrar la misma informaci\u00f3n en una lista de cards, \u00bfVerdad que el mapeo es diferente? \u00b4Todo lo dem\u00e1s se deja intacto y solo cambiamos el mapeo. <\/p>\n\n\n\n<p>Para esta pantalla donde tenemos una tabla, el resultado es el siguiente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/resultado-final-parte-1.jpg\" alt=\"Resultado final parte 1\" class=\"wp-image-3212\"\/><figcaption class=\"wp-element-caption\">Error arreglado<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Estilos en campo de b\u00fasqueda <\/h3>\n\n\n\n<p>Un toque final, vamos a mejorar el campo de b\u00fasqueda creando estos estilos:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".label {  display: inline-flex;  flex-direction: column;  font-weight: bold;  font-size: 1.2rem;  margin-bottom: 1rem;}.input {  padding: 8px;  font-size: 1.2rem;}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">label <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">display<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">inline<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">flex<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">flex<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">direction<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">column<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">font<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">weight<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">bold<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">font<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">size<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 1<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #F07178\">2<\/span><span style=\"color: #BABED8\">rem<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">margin<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">bottom<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 1<\/span><span style=\"color: #BABED8\">rem<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">input <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">padding<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 8<\/span><span style=\"color: #BABED8\">px<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">font<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #FFCB6B\">size<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> 1<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #F07178\">2<\/span><span style=\"color: #BABED8\">rem<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el componente importamos y aplicamos estilos:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import styles from &quot;.\/SearchField.module.scss&quot;;export default function SearchField({ label, onSearchChange }) {  return (    &lt;label className={styles.label}&gt;      {label}      &lt;input type=&quot;search&quot; onChange={onSearchChange} className={styles.input} \/&gt;    &lt;\/label&gt;  );}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #BABED8\"> styles <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">.\/SearchField.module.scss<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">SearchField<\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">label<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">onSearchChange<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">label<\/span><span style=\"color: #89DDFF\">}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\">label<\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">input<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">type<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">search<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">onChange<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">onSearchChange<\/span><span style=\"color: #89DDFF\">} <\/span><span style=\"color: #C792EA\">className<\/span><span style=\"color: #89DDFF\">={<\/span><span style=\"color: #BABED8\">styles<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">input<\/span><span style=\"color: #89DDFF\">} \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">label<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ahora si tenemos el resultado final:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/12\/buscador-parte-1-terminada.jpg\" alt=\"Buscador parte 1 terminada\" class=\"wp-image-3213\"\/><figcaption class=\"wp-element-caption\">Buscador parte 1 terminada<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n. M\u00e1s iteraciones<\/h2>\n\n\n\n<p>Todav\u00eda quedan m\u00e1s cosas por hacer y mejorar, al igual que hicimos en esta publicaci\u00f3n incrementando en iteraciones peque\u00f1as hasta conseguir que funcione el buscador, as\u00ed tendremos m\u00e1s publicaciones para continuar mejorando e incrementando a\u00fan m\u00e1s las funcionalidades.<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>In this post we will see how to use redux to obtain data from an API. With this data obtained we are going to fill out a list of cryptocurrencies and add a search engine. <\/p>","protected":false},"author":2,"featured_media":3709,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,35,36],"tags":[54,73,76],"class_list":["post-3153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","category-redux","tag-javascript","tag-react","tag-redux"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3153"}],"version-history":[{"count":6,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3153\/revisions"}],"predecessor-version":[{"id":3924,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3153\/revisions\/3924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3709"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}