问:
How to convert SVG into React Component?
I am working on my Portfolio site based on this React template and it has the feature of switching between dark and light modes, and this applies to the SVG's also. I want to add a different SVG to the site, so how do I generate the JS code for it so that I can import it as a React component?. EDIT: The following code snippet is not written by me, found it on the Github repo. So if I want to add custom/different SVG's to my site as a react component, how would I generate the JS code for that?

left - dark mode, right - light mode

```<code>import React from "react";

export default function DataScienceImg(props) {
  const theme = props.theme;
  return (
    <svg
      id="fa973782-3a18-4630-a762-87130b613ac3"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox="0 0 1120 829.80067"
    >
      <title></title>
      <ellipse
        cx="975.57906"
        cy="811.05902"
        rx="144.42094"
        ry="18.74165"
        fill={theme.imageDark}
      />
      <rect y="27.5" width="436" height="272" fill={theme.imageDark} />
      <rect
        x="27.5"
        y="1"
        width="436"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <path
        d="M352.468,237.56768A94,94,0,0,0,286,77.09967v94Z"
        transform="translate(-40 -34.59967)"
        fill={theme.text}
      />
      <path
        d="M286,77.09967a94.01123,94.01123,0,0,0-44.968,176.56414L286,171.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M352.468,237.56768,286,171.09967l-44.968,82.56414a94.04908,94.04908,0,0,0,111.436-16.09613Z"
        transform="translate(-40 -34.59967)"
        fill="#FE9800"
      />
      <rect x="44" y="216.5" width="18" height="18" fill={theme.accentColor} />
      <rect x="70" y="216.5" width="18" height="18" fill={theme.text} />
      <rect x="96" y="216.5" width="18" height="18" fill="#FE9800" />
      <rect x="355" y="220.5" width="74" height="3" fill={theme.text} />
      <rect x="355" y="229.5" width="74" height="3" fill={theme.text} />
      <rect x="355" y="238.5" width="74" height="3" fill={theme.text} />
      <rect x="137" y="406.5" width="248" height="272" fill={theme.imageDark} />
      <rect
        x="162"
        y="380.5"
        width="248"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <rect
        x="175"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.accentColor}
      />
      <rect
        x="194.31429"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.text}
      />
      <rect
        x="213.62857"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill="#FE9800"
      />
      <rect
        x="325"
        y="627.62162"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="325"
        y="633.94595"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="325"
        y="640.27027"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <path
        d="M326,463.09967v22a66,66,0,0,1,46.66907,112.66906l15.55633,15.55634A88,88,0,0,0,326,463.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.text}
      />
      <path
        d="M388.2254,613.32507l-15.55633-15.55634a65.98344,65.98344,0,0,1-86.6,5.87165L272.7533,621.16113a87.99775,87.99775,0,0,0,115.4721-7.83606Z"
        transform="translate(-40 -34.59967)"
        fill="#FE9800"
      />
      <path
        d="M260,551.09967a66,66,0,0,1,66-66v-22a87.99914,87.99914,0,0,0-53.2467,158.06146l13.31579-17.52075A65.885,65.885,0,0,1,260,551.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M971.62443,175.593s-4.08028,30.31061,6.41186,33.808,7.57765,30.31062,7.57765,30.31062l-31.47641,23.89875-27.979,2.33159-6.99476-36.13958L923.244,220.476s15.73821-18.65268,4.66318-37.88826S971.62443,175.593,971.62443,175.593Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M971.62443,175.593s-4.08028,30.31061,6.41186,33.808,7.57765,30.31062,7.57765,30.31062l-31.47641,23.89875-27.979,2.33159-6.99476-36.13958L923.244,220.476s15.73821-18.65268,4.66318-37.88826S971.62443,175.593,971.62443,175.593Z"
        transform="translate(-40 -34.59967)"
        opacity="0.1"
      />
      <path
        d="M942.47961,411.666,905.75713,497.9347s-28.56192-16.3211-45.46592-14.57241-37.88827-18.65268-37.88827-18.65268l20.98427-101.424,39.05406-107.83584,54.20937,34.39089Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M942.47961,411.666,905.75713,497.9347s-28.56192-16.3211-45.46592-14.57241-37.88827-18.65268-37.88827-18.65268l20.98427-101.424,39.05406-107.83584,54.20937,34.39089Z"
        transform="translate(-40 -34.59967)"
        opacity="0.1"
      />
      <polygon
        points="960.186 743.708 960.186 771.687 933.956 771.687 938.036 739.045 960.186 743.708"
        fill={theme.accentColor}
      />
      <polygon
        points="1028.385 695.328 1047.621 706.986 1033.631 739.045 1019.059 737.296 1005.069 717.478 1028.385 695.328"
        fill={theme.accentColor}
      />
      <path
        d="M1005.43242,403.50548l34.39089,81.02261s-12.24083,89.766-11.65793,97.3437,1.16579,10.49214-1.74869,16.904-4.08027,10.49213-2.33158,18.06979,2.33158,10.49213,1.16579,13.40661-9.32634,122.99115-13.40662,131.1517,2.33159,21.56717-1.74869,22.733-34.39089-1.74869-36.13958-8.74344,5.829-23.89876,1.74869-29.14483.5829-194.10451-5.24607-206.92823-69.94757-24.48165-69.94757-24.48165-5.829-37.30537-2.33158-43.13433S906.34,429.15293,906.34,429.15293Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M971.62443,801.62374s16.3211-19.23558,30.31061,0c0,0,1.16579,22.733,11.075,27.39614s5.24607,23.31585-8.74344,23.89875-32.05931,2.91448-32.6422-4.66317,2.33158-12.24083-2.91448-14.57241,0-15.7382,0-15.7382Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M973.37312,522.99925s-.5829,41.96854-4.66317,47.79751-6.41187,9.32634-4.08028,15.7382,5.829,18.06979,4.08028,20.40138,1.74868,14.57241,1.74868,14.57241,44.883,21.56717,65.8673,66.45019c0,0,21.56717,35.55668,27.979,36.13958s13.98951-4.08028,10.49214,9.32634-16.904,30.89351-26.81324,29.14482S1030.497,743.917,1030.497,743.917s-77.52523-78.691-85.68578-81.02261-31.47641-20.98427-35.55668-32.6422-12.82372-109.00163-8.74345-115.41349,19.23559-15.15531,19.23559-15.15531Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M1074.2142,727.5959s36.13958,1.16579,36.72247,9.90924-15.1553,60.62123-12.82372,72.86205-18.06979,40.21986-31.4764,34.39089-2.91449-36.13958-2.91449-36.13958-13.40661-41.38564-11.075-41.96854,25.64744-7.57765,24.48165-14.57241S1074.2142,727.5959,1074.2142,727.5959Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <circle
        cx="904.51974"
        cy="136.03869"
        r="36.13958"
        fill={theme.skinColor}
      />
      <path
        d="M980.95077,226.305s-19.81848,20.98427-34.39089,17.48689-22.15006-28.56192-22.15006-28.56192l-26.23034-4.66318s-18.65269,82.7713-18.65269,90.93185,18.65269,96.17791,18.65269,111.91611-15.15531,25.06455,8.16055,24.48165,12.24082-8.16055,46.04882-8.74344,39.05406,6.99475,46.04881-5.24607a97.52308,97.52308,0,0,1,17.4869-21.56717l-12.24083-43.13434L1001.935,237.38s-14.94433-29.14482-21.75313-26.81324C980.18191,210.56676,983.86525,223.39049,980.95077,226.305Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M973.7711,205.41135s31.07842,3.40672,39.82187,9.81859,33.2251,11.075,32.6422,15.7382-28.56192,71.11336-28.56192,71.11336-12.82373,52.46068-1.74869,64.70151,52.46067,145.72411,45.46592,156.79914-29.14482-33.808-29.14482-33.808-29.72772-96.17791-46.04882-112.499S968.71,272.93668,968.71,268.85641,973.7711,205.41135,973.7711,205.41135Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M928.31275,212.17213S890.01893,197.743,876.61231,203.572s-21.56717,6.99475-21.56717,6.99475L850.382,267.69061s-1.74869,82.1884-16.904,102.00688-25.06454,102.58977-22.733,110.75032-4.08027,22.15007,5.829,18.65269,37.30537-83.93709,37.30537-83.93709,0-46.04882,16.3211-58.87254,43.13433-65.86729,44.30013-78.691,12.24082-48.3804,12.24082-48.3804Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M1059.64179,395.92783S1042.1549,428.57,1039.82331,434.399s-18.65269,45.46593-41.96854,36.72248,22.733-51.29489,22.733-51.29489l10.49213-35.55668S1058.476,378.44094,1059.64179,395.92783Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M860.87411,210.56676h-5.829s-5.829-4.66317-12.82372-1.74869-23.31586-1.16579-23.31586.5829-18.06979-5.24607-25.64744-1.74869-34.97379,4.66317-34.97379,4.66317-11.075,27.979-3.49737,33.2251,18.65268,1.16579,23.89875,5.24607,15.15531-.5829,18.65268,4.66317,16.3211,14.57241,19.23559,8.74345-2.91449-11.075,9.32634-4.66318,31.47641,6.41187,31.47641,6.41187Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M947.77766,143.93681c-4.89044-1.13-9.96711.1222-14.92033.93394s-10.41184,1.07935-14.60177-1.6843c-3.0943-2.041-4.99673-5.41753-6.78315-8.66544a9.97336,9.97336,0,0,1-1.45909-3.82348c-.21032-2.40206,1.31768-4.59363,2.94029-6.37723,7.537-8.28481,18.55107-12.81929,29.65825-14.25967,9.13047-1.184,18.64965-.3911,27.08125,3.307s15.67956,10.47034,18.99451,19.05978a54.12707,54.12707,0,0,1,2.83686,13.61089,40.65711,40.65711,0,0,1,.19122,10.30794,44.18819,44.18819,0,0,1-1.99761,7.46792L984.22692,180.395a10.92419,10.92419,0,0,1-2.15919,4.27407,3.73555,3.73555,0,0,1-4.37439.95837,13.61344,13.61344,0,0,0,.19684-5.50046,4.64127,4.64127,0,0,0-3.66213-3.69318c-2.024-.21479-3.753,1.35417-5.673,2.02989a6.979,6.979,0,0,1-8.811-5.24475c-.30309-1.89562.20582-3.92494-.51269-5.7051-.84183-2.08568-3.07419-3.17852-4.7513-4.67723a10.93629,10.93629,0,0,1-3.00075-11.3656c.449-1.37991,1.717-2.00722,1.46331-3.59244C952.60981,145.79888,949.54364,144.34487,947.77766,143.93681Z"
        transform="translate(-40 -34.59967)"
        fill={theme.dark}
      />
      <rect x="507" y="236.5" width="248" height="272" fill={theme.imageDark} />
      <rect
        x="532"
        y="210.5"
        width="248"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <polyline
        points="556 227.5 556 435.5 757 435.5"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <rect x="567" y="362.5" width="45" height="72" fill="#FE9800" />
      <rect x="632" y="313.5" width="45" height="121" fill={theme.text} />
      <rect
        x="697"
        y="256.5"
        width="45"
        height="178"
        fill={theme.accentColor}
      />
      <rect
        x="553"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.accentColor}
      />
      <rect
        x="572.31429"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.text}
      />
      <rect
        x="591.62857"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill="#FE9800"
      />
      <rect
        x="703"
        y="457.62162"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="703"
        y="463.94595"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="703"
        y="470.27027"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <path
        d="M764.3076,212.28192c10.62848.46211,18.52575,10.10069,17.376,20.67691-1.04159,9.58175-4.884,21.50465-16.98745,26.08434-21.56716,8.16055-20.40137-37.88827-16.3211-39.637C751.09528,218.24042,755.36985,211.89333,764.3076,212.28192Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M1039.82331,227.854l6.41186,3.11414s13.98951,28.56192,14.57241,32.6422,9.90924,19.23558,6.41186,23.31586-8.74344,14.57241-5.24607,18.65268,11.65793,20.40138,11.65793,26.23034-8.74344,21.56717-2.91448,23.31586,4.08028,24.48165,2.91448,26.23034-16.3211,30.31061-16.3211,30.31061-2.91448-32.6422-31.4764-19.23558c0,0-2.33159-16.3211,0-17.48689s8.16055-8.16055,3.49737-9.32635-11.075-15.1553-9.90924-16.904,4.08028-4.08028,1.1658-5.829-5.24607-11.65792-4.66317-13.40661-6.41186-9.90924-6.41186-9.90924Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
    </svg>
  );
}
</code>```

答:
you should import your svg icon like this:

```<code>import {ReactComponent as IconName} from "./icon.svg"
</code>```

and use it like this

```<code><IconName/>
</code>```

keep that in mind it's case sensitive

incorrect mode :

```<code><iconname/>
</code>```

correct mode :

```<code><IconName/>
</code>```

Body:
I am working on my Portfolio site based on this React template and it has the feature of switching between dark and light modes, and this applies to the SVG's also. I want to add a different SVG to the site, so how do I generate the JS code for it so that I can import it as a React component?. EDIT: The following code snippet is not written by me, found it on the Github repo. So if I want to add custom/different SVG's to my site as a react component, how would I generate the JS code for that?

left - dark mode, right - light mode

import React from "react";

export default function DataScienceImg(props) {
  const theme = props.theme;
  return (
    <svg
      id="fa973782-3a18-4630-a762-87130b613ac3"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox="0 0 1120 829.80067"
    >
      <title></title>
      <ellipse
        cx="975.57906"
        cy="811.05902"
        rx="144.42094"
        ry="18.74165"
        fill={theme.imageDark}
      />
      <rect y="27.5" width="436" height="272" fill={theme.imageDark} />
      <rect
        x="27.5"
        y="1"
        width="436"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <path
        d="M352.468,237.56768A94,94,0,0,0,286,77.09967v94Z"
        transform="translate(-40 -34.59967)"
        fill={theme.text}
      />
      <path
        d="M286,77.09967a94.01123,94.01123,0,0,0-44.968,176.56414L286,171.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M352.468,237.56768,286,171.09967l-44.968,82.56414a94.04908,94.04908,0,0,0,111.436-16.09613Z"
        transform="translate(-40 -34.59967)"
        fill="#FE9800"
      />
      <rect x="44" y="216.5" width="18" height="18" fill={theme.accentColor} />
      <rect x="70" y="216.5" width="18" height="18" fill={theme.text} />
      <rect x="96" y="216.5" width="18" height="18" fill="#FE9800" />
      <rect x="355" y="220.5" width="74" height="3" fill={theme.text} />
      <rect x="355" y="229.5" width="74" height="3" fill={theme.text} />
      <rect x="355" y="238.5" width="74" height="3" fill={theme.text} />
      <rect x="137" y="406.5" width="248" height="272" fill={theme.imageDark} />
      <rect
        x="162"
        y="380.5"
        width="248"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <rect
        x="175"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.accentColor}
      />
      <rect
        x="194.31429"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.text}
      />
      <rect
        x="213.62857"
        y="621.81429"
        width="13.37143"
        height="13.37143"
        fill="#FE9800"
      />
      <rect
        x="325"
        y="627.62162"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="325"
        y="633.94595"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="325"
        y="640.27027"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <path
        d="M326,463.09967v22a66,66,0,0,1,46.66907,112.66906l15.55633,15.55634A88,88,0,0,0,326,463.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.text}
      />
      <path
        d="M388.2254,613.32507l-15.55633-15.55634a65.98344,65.98344,0,0,1-86.6,5.87165L272.7533,621.16113a87.99775,87.99775,0,0,0,115.4721-7.83606Z"
        transform="translate(-40 -34.59967)"
        fill="#FE9800"
      />
      <path
        d="M260,551.09967a66,66,0,0,1,66-66v-22a87.99914,87.99914,0,0,0-53.2467,158.06146l13.31579-17.52075A65.885,65.885,0,0,1,260,551.09967Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M971.62443,175.593s-4.08028,30.31061,6.41186,33.808,7.57765,30.31062,7.57765,30.31062l-31.47641,23.89875-27.979,2.33159-6.99476-36.13958L923.244,220.476s15.73821-18.65268,4.66318-37.88826S971.62443,175.593,971.62443,175.593Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M971.62443,175.593s-4.08028,30.31061,6.41186,33.808,7.57765,30.31062,7.57765,30.31062l-31.47641,23.89875-27.979,2.33159-6.99476-36.13958L923.244,220.476s15.73821-18.65268,4.66318-37.88826S971.62443,175.593,971.62443,175.593Z"
        transform="translate(-40 -34.59967)"
        opacity="0.1"
      />
      <path
        d="M942.47961,411.666,905.75713,497.9347s-28.56192-16.3211-45.46592-14.57241-37.88827-18.65268-37.88827-18.65268l20.98427-101.424,39.05406-107.83584,54.20937,34.39089Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M942.47961,411.666,905.75713,497.9347s-28.56192-16.3211-45.46592-14.57241-37.88827-18.65268-37.88827-18.65268l20.98427-101.424,39.05406-107.83584,54.20937,34.39089Z"
        transform="translate(-40 -34.59967)"
        opacity="0.1"
      />
      <polygon
        points="960.186 743.708 960.186 771.687 933.956 771.687 938.036 739.045 960.186 743.708"
        fill={theme.accentColor}
      />
      <polygon
        points="1028.385 695.328 1047.621 706.986 1033.631 739.045 1019.059 737.296 1005.069 717.478 1028.385 695.328"
        fill={theme.accentColor}
      />
      <path
        d="M1005.43242,403.50548l34.39089,81.02261s-12.24083,89.766-11.65793,97.3437,1.16579,10.49214-1.74869,16.904-4.08027,10.49213-2.33158,18.06979,2.33158,10.49213,1.16579,13.40661-9.32634,122.99115-13.40662,131.1517,2.33159,21.56717-1.74869,22.733-34.39089-1.74869-36.13958-8.74344,5.829-23.89876,1.74869-29.14483.5829-194.10451-5.24607-206.92823-69.94757-24.48165-69.94757-24.48165-5.829-37.30537-2.33158-43.13433S906.34,429.15293,906.34,429.15293Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M971.62443,801.62374s16.3211-19.23558,30.31061,0c0,0,1.16579,22.733,11.075,27.39614s5.24607,23.31585-8.74344,23.89875-32.05931,2.91448-32.6422-4.66317,2.33158-12.24083-2.91448-14.57241,0-15.7382,0-15.7382Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M973.37312,522.99925s-.5829,41.96854-4.66317,47.79751-6.41187,9.32634-4.08028,15.7382,5.829,18.06979,4.08028,20.40138,1.74868,14.57241,1.74868,14.57241,44.883,21.56717,65.8673,66.45019c0,0,21.56717,35.55668,27.979,36.13958s13.98951-4.08028,10.49214,9.32634-16.904,30.89351-26.81324,29.14482S1030.497,743.917,1030.497,743.917s-77.52523-78.691-85.68578-81.02261-31.47641-20.98427-35.55668-32.6422-12.82372-109.00163-8.74345-115.41349,19.23559-15.15531,19.23559-15.15531Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <path
        d="M1074.2142,727.5959s36.13958,1.16579,36.72247,9.90924-15.1553,60.62123-12.82372,72.86205-18.06979,40.21986-31.4764,34.39089-2.91449-36.13958-2.91449-36.13958-13.40661-41.38564-11.075-41.96854,25.64744-7.57765,24.48165-14.57241S1074.2142,727.5959,1074.2142,727.5959Z"
        transform="translate(-40 -34.59967)"
        fill={theme.imageClothes}
      />
      <circle
        cx="904.51974"
        cy="136.03869"
        r="36.13958"
        fill={theme.skinColor}
      />
      <path
        d="M980.95077,226.305s-19.81848,20.98427-34.39089,17.48689-22.15006-28.56192-22.15006-28.56192l-26.23034-4.66318s-18.65269,82.7713-18.65269,90.93185,18.65269,96.17791,18.65269,111.91611-15.15531,25.06455,8.16055,24.48165,12.24082-8.16055,46.04882-8.74344,39.05406,6.99475,46.04881-5.24607a97.52308,97.52308,0,0,1,17.4869-21.56717l-12.24083-43.13434L1001.935,237.38s-14.94433-29.14482-21.75313-26.81324C980.18191,210.56676,983.86525,223.39049,980.95077,226.305Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M973.7711,205.41135s31.07842,3.40672,39.82187,9.81859,33.2251,11.075,32.6422,15.7382-28.56192,71.11336-28.56192,71.11336-12.82373,52.46068-1.74869,64.70151,52.46067,145.72411,45.46592,156.79914-29.14482-33.808-29.14482-33.808-29.72772-96.17791-46.04882-112.499S968.71,272.93668,968.71,268.85641,973.7711,205.41135,973.7711,205.41135Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M928.31275,212.17213S890.01893,197.743,876.61231,203.572s-21.56717,6.99475-21.56717,6.99475L850.382,267.69061s-1.74869,82.1884-16.904,102.00688-25.06454,102.58977-22.733,110.75032-4.08027,22.15007,5.829,18.65269,37.30537-83.93709,37.30537-83.93709,0-46.04882,16.3211-58.87254,43.13433-65.86729,44.30013-78.691,12.24082-48.3804,12.24082-48.3804Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M1059.64179,395.92783S1042.1549,428.57,1039.82331,434.399s-18.65269,45.46593-41.96854,36.72248,22.733-51.29489,22.733-51.29489l10.49213-35.55668S1058.476,378.44094,1059.64179,395.92783Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M860.87411,210.56676h-5.829s-5.829-4.66317-12.82372-1.74869-23.31586-1.16579-23.31586.5829-18.06979-5.24607-25.64744-1.74869-34.97379,4.66317-34.97379,4.66317-11.075,27.979-3.49737,33.2251,18.65268,1.16579,23.89875,5.24607,15.15531-.5829,18.65268,4.66317,16.3211,14.57241,19.23559,8.74345-2.91449-11.075,9.32634-4.66318,31.47641,6.41187,31.47641,6.41187Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
      <path
        d="M947.77766,143.93681c-4.89044-1.13-9.96711.1222-14.92033.93394s-10.41184,1.07935-14.60177-1.6843c-3.0943-2.041-4.99673-5.41753-6.78315-8.66544a9.97336,9.97336,0,0,1-1.45909-3.82348c-.21032-2.40206,1.31768-4.59363,2.94029-6.37723,7.537-8.28481,18.55107-12.81929,29.65825-14.25967,9.13047-1.184,18.64965-.3911,27.08125,3.307s15.67956,10.47034,18.99451,19.05978a54.12707,54.12707,0,0,1,2.83686,13.61089,40.65711,40.65711,0,0,1,.19122,10.30794,44.18819,44.18819,0,0,1-1.99761,7.46792L984.22692,180.395a10.92419,10.92419,0,0,1-2.15919,4.27407,3.73555,3.73555,0,0,1-4.37439.95837,13.61344,13.61344,0,0,0,.19684-5.50046,4.64127,4.64127,0,0,0-3.66213-3.69318c-2.024-.21479-3.753,1.35417-5.673,2.02989a6.979,6.979,0,0,1-8.811-5.24475c-.30309-1.89562.20582-3.92494-.51269-5.7051-.84183-2.08568-3.07419-3.17852-4.7513-4.67723a10.93629,10.93629,0,0,1-3.00075-11.3656c.449-1.37991,1.717-2.00722,1.46331-3.59244C952.60981,145.79888,949.54364,144.34487,947.77766,143.93681Z"
        transform="translate(-40 -34.59967)"
        fill={theme.dark}
      />
      <rect x="507" y="236.5" width="248" height="272" fill={theme.imageDark} />
      <rect
        x="532"
        y="210.5"
        width="248"
        height="272"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <polyline
        points="556 227.5 556 435.5 757 435.5"
        fill="none"
        stroke="#3F3D56"
        strokeMiterlimit="10"
        strokeWidth="2"
      />
      <rect x="567" y="362.5" width="45" height="72" fill="#FE9800" />
      <rect x="632" y="313.5" width="45" height="121" fill={theme.text} />
      <rect
        x="697"
        y="256.5"
        width="45"
        height="178"
        fill={theme.accentColor}
      />
      <rect
        x="553"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.accentColor}
      />
      <rect
        x="572.31429"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill={theme.text}
      />
      <rect
        x="591.62857"
        y="451.81429"
        width="13.37143"
        height="13.37143"
        fill="#FE9800"
      />
      <rect
        x="703"
        y="457.62162"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="703"
        y="463.94595"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <rect
        x="703"
        y="470.27027"
        width="52"
        height="2.10811"
        fill={theme.text}
      />
      <path
        d="M764.3076,212.28192c10.62848.46211,18.52575,10.10069,17.376,20.67691-1.04159,9.58175-4.884,21.50465-16.98745,26.08434-21.56716,8.16055-20.40137-37.88827-16.3211-39.637C751.09528,218.24042,755.36985,211.89333,764.3076,212.28192Z"
        transform="translate(-40 -34.59967)"
        fill={theme.skinColor}
      />
      <path
        d="M1039.82331,227.854l6.41186,3.11414s13.98951,28.56192,14.57241,32.6422,9.90924,19.23558,6.41186,23.31586-8.74344,14.57241-5.24607,18.65268,11.65793,20.40138,11.65793,26.23034-8.74344,21.56717-2.91448,23.31586,4.08028,24.48165,2.91448,26.23034-16.3211,30.31061-16.3211,30.31061-2.91448-32.6422-31.4764-19.23558c0,0-2.33159-16.3211,0-17.48689s8.16055-8.16055,3.49737-9.32635-11.075-15.1553-9.90924-16.904,4.08028-4.08028,1.1658-5.829-5.24607-11.65792-4.66317-13.40661-6.41186-9.90924-6.41186-9.90924Z"
        transform="translate(-40 -34.59967)"
        fill={theme.accentColor}
      />
    </svg>
  );
}

Body:
you should import your svg icon like this:

import {ReactComponent as IconName} from "./icon.svg"

and use it like this

<IconName/>

keep that in mind it's case sensitive

incorrect mode :

<iconname/>

correct mode :

<IconName/>


来源: stackexchange

问:
While adding google font to my blog in blogger I got error in Header Section
Please help me solve the error displayed in the image below.

It says:

```<code>Error parsing XML, line 5, column 71: The reference to entity "display" must end with the ';' delimiter
</code>```

```<code><strike>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
</strike>
</code>```

答:
The html code will be like this:

```<code><link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
</code>```

For your kind attention, you can avoid display=swap. And I'll recommend this one:

```<code><link as='style' href='https://fonts.googleapis.com/css?family=Roboto' media='all' onload='this.onload=null;this.rel='stylesheet'' rel='preload'/>
</code>```

ContentLicense: CC BY-SA 4.0

Body:
Please help me solve the error displayed in the image below.

It says:

Error parsing XML, line 5, column 71: The reference to entity "display" must end with the ';' delimiter

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>

Body:
The html code will be like this:

<link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet"/>

For your kind attention, you can avoid display=swap. And I'll recommend this one:

<link as='style' href='https://fonts.googleapis.com/css?family=Roboto' media='all' onload='this.onload=null;this.rel=&apos;stylesheet&apos;' rel='preload'/>


问:
preg_replace problems
I have a string The Incredible Hulk (2008) and use pattern

```<code>/^\([0-9]{1,4}\)$/
</code>```

to remove (2008). PHP code looks like this:

```<code>$x = trim(preg_replace("/^\([0-9]{1,4}\)$/", "", "The Incredible Hulk (2008)"));
</code>```

And the result is:

```<code>The Incredible Hulk (2008)
</code>```

What am I doing wrong?

答:
Take out "^".

```<code>$x = trim(preg_replace("/\([0-9]{1,4}\)$/", "", "The Incredible Hulk (2008)"));
</code>```

The (2008) is not anchored at the start of the string. "^" requires the match to start at the beginning of a line.

ContentLicense: CC BY-SA 3.0

Title: preg_replace problems

Body:
I have a string The Incredible Hulk (2008) and use pattern

/^\([0-9]{1,4}\)$/

to remove (2008). PHP code looks like this:

$x = trim(preg_replace("/^\([0-9]{1,4}\)$/", "", "The Incredible Hulk (2008)"));

And the result is:

The Incredible Hulk (2008)

What am I doing wrong?

Body:
Take out "^".

$x = trim(preg_replace("/\([0-9]{1,4}\)$/", "", "The Incredible Hulk (2008)"));

The (2008) is not anchored at the start of the string. "^" requires the match to start at the beginning of a line.


问:
Firebase Hosting set up issue
I'm just trying to do a simple set-up for hosting on firebase. I'm following the instructions at (https://www.firebase.com/docs/hosting/guide/deploying.html) but I'm missing something because I keep getting an error of:

'firebase' is not recognized as an internal or external command, operable program, or batch file."

What I've done:

Installed nodejs.

Set PATH = to C:\Program Files\nodejs; via control Panel

in cmd: cd C:\Program Files\nodejs

npm install -g firebase-tools

changed directory to folder with my html files

tried running both firebase app init and firebase init neither of which work and give me the same error

答:
open a terminal or cmd run as administrator mode

or

If you are using MS Windows:

Open Start Menu or press Win button on your keyboard.

Type "variables".

Click on "Edit the system environment variables"

Click on "Environment Variables..." button.

In the "System variables" list select "Path" and click on the "Edit..." button under the list.
In the "Edit environment variable" dialog click on the "Browse..." button.

Navigate to the "c:\users\AppData\Roaming" dir and select the "npm" sub-dir, then click "OK".

In the "Edit environment variable" dialog click "OK".

In the "Environment Variables" dialog click on "OK".

For the Linux users:

Navigate to the home_dir.

Edit the hidden ".bash_profile" file.

Add line with following text "export PATH="$PATH:/usr/local/bin".

Title: Firebase Hosting set up issue


问:
Combine multiple LiveData values into one using MediatorLiveData
I have an email, password, and phone number, that are all live data values updated in real time by a fragment as the user types.

How can I have a live data variable that observes all three of those variables, and returns something based on all of their combined results?

ViewModel

```<code>class AuthenticationViewModel: ViewModel() {
    var email: MutableLiveData<String> = MutableLiveData("")
    var password: MutableLiveData<String> = MutableLiveData("")
    var phoneNumber: MutableLiveData<Int> = MutableLiveData(0)

    val isFormValid: MediatorLiveData<Boolean> = {
        // if email is valid
        // and if password is valid
        // and if phoneNumber is valid
        // return true
        // How do I do this?
    }
}
</code>```

Fragment

```<code>binding.emailInput.addTextChangedListener { email ->
    viewModel.email.value = email.toString()
}

viewModel.isFormValid.observe(this, {
    // do what I want in real time
})
</code>```

答:
Try adding each liveData as a source like this and check the other liveData's value when one of them trigger a change:
ViewModel

```<code>class AuthenticationViewModel: ViewModel() {
    val email: MutableLiveData<String> = MutableLiveData("")
    val password: MutableLiveData<String> = MutableLiveData("")
    val phoneNumber: MutableLiveData<Int> = MutableLiveData(0)

    val isFormValid: MediatorLiveData<Boolean> = MediatorLiveData().apply {
        addSource(email) { emailValue -> isValidEmail(emailValue) && isValidPassword(password.value) && isValidPhoneNumber(phoneNumber.value) }
        addSource(password) { passwordValue -> isValidEmail(email.value) && isValidPassword(passwordValue) && isValidPhoneNumber(phoneNumber.value) }
        addSource(phoneNumber) { phoneNumberValue -> isValidEmail(email.value) && isValidPassword(password.value) && isValidPhoneNumber(phoneNumberValue) }

    }
}
</code>```

And then just observe the livedata as usual:

Fragment

```<code>binding.emailInput.addTextChangedListener { email ->
    viewModel.email.value = email.toString()
}

viewModel.isFormValid.observe(this, {
    // do what I want in real time
})
</code>```

solution inspired by https://medium.com/codex/how-to-use-mediatorlivedata-with-multiple-livedata-types-a40e1a59e8cf , kinda the same but not using Triple and a new class for it, also you can add as many as you want.

Body:
I have an email, password, and phone number, that are all live data values updated in real time by a fragment as the user types.

How can I have a live data variable that observes all three of those variables, and returns something based on all of their combined results?

ViewModel

class AuthenticationViewModel: ViewModel() {
    var email: MutableLiveData<String> = MutableLiveData("")
    var password: MutableLiveData<String> = MutableLiveData("")
    var phoneNumber: MutableLiveData<Int> = MutableLiveData(0)

    val isFormValid: MediatorLiveData<Boolean> = {
        // if email is valid
        // and if password is valid
        // and if phoneNumber is valid
        // return true
        // How do I do this?
    }
}

Fragment

binding.emailInput.addTextChangedListener { email ->
    viewModel.email.value = email.toString()
}

viewModel.isFormValid.observe(this, {
    // do what I want in real time
})

Body:
Try adding each liveData as a source like this and check the other liveData's value when one of them trigger a change:
ViewModel

class AuthenticationViewModel: ViewModel() {
    val email: MutableLiveData<String> = MutableLiveData("")
    val password: MutableLiveData<String> = MutableLiveData("")
    val phoneNumber: MutableLiveData<Int> = MutableLiveData(0)

    val isFormValid: MediatorLiveData<Boolean> = MediatorLiveData().apply {
        addSource(email) { emailValue -> isValidEmail(emailValue) && isValidPassword(password.value) && isValidPhoneNumber(phoneNumber.value) }
        addSource(password) { passwordValue -> isValidEmail(email.value) && isValidPassword(passwordValue) && isValidPhoneNumber(phoneNumber.value) }
        addSource(phoneNumber) { phoneNumberValue -> isValidEmail(email.value) && isValidPassword(password.value) && isValidPhoneNumber(phoneNumberValue) }

    }
}

And then just observe the livedata as usual:

Fragment

binding.emailInput.addTextChangedListener { email ->
    viewModel.email.value = email.toString()
}

viewModel.isFormValid.observe(this, {
    // do what I want in real time
})

solution inspired by https://medium.com/codex/how-to-use-mediatorlivedata-with-multiple-livedata-types-a40e1a59e8cf , kinda the same but not using Triple and a new class for it, also you can add as many as you want.


问:
RecyclerView not calling onCreateViewHolder or onBindView
Not getting any errors and all the data seems valid. For some reason, nether of the view related methods are being called. I have made sure of the following:

getItemCount() is the only adapter method being called and is returning a positive integer value, (I know this will be the area you guys will look at)

Constructor is being called, member variables are valid.

Parent View is a vertical LinearLayout; no scrollview, or any other view with their own scroll properties in sight.

containing fragment view is created and shown on screen.

Here is the declaration in the fragment followed by the adapter. Any help would be appreciated as this has be completely baffled.

```<code>SubMenuAdapter adapter = new SubMenuAdapter(getActivity(), mContentItems);
    recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    recyclerView.setAdapter(adapter);
</code>```

public class SubMenuAdapter extends RecyclerView.Adapter<SubMenuAdapter.ViewHolder> {
private static final String TAG = String.format("==> %S", SubMenuAdapter.class.getSimpleName());

private final List<ContentItem> mContentItems;
private Context mContext;

public SubMenuAdapter(Context context, List<ContentItem> contenItems) {
    Log.d(TAG, "Constructor called");
    mContentItems = contenItems;
    mContext = context;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    Log.d(TAG, "onCreateViewHolder called");
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_resource_efficiency, parent, false);
    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    Log.d(TAG, "onBindViewHolder called");

    ContentItem item = mContentItems.get(position);
    holder.textName.setText(item.getName());
    FontSetter.setMyriadProRegular(mContext, holder.textName);
    Picasso.with(mContext).load("file://" + item.getPreviewImageDefault()).into(holder.imageIcon);
}

@Override
public int getItemCount() {
    Log.d(mContext, String.format("getItemCount: %d", mContentItems.size()));
    return mContentItems.size();
}

// ViewHolder
public static class ViewHolder extends RecyclerView.ViewHolder {

    TextView textName;
    ImageView imageIcon;

    public ViewHolder(View view) {
        super(view);
        textName = (TextView) view.findViewById(R.id.tv_resource_efficiency_option);
        imageIcon = (ImageView) view.findViewById(R.id.iv_resource_efficiency_icon);
    }
}
```

答:
Sometimes this bug occurs if you put viewpager inside a scrollview which will shrink the parent view along with the viewpager and its child fragments.
Therefore with now view to be found for child fragments onCreateView and onBindView methods will not be called.
Simply remove scrollview or add weights to your layout so that the views don't shrink.</p>

Body:
Not getting any errors and all the data seems valid. For some reason, nether of the view related methods are being called. I have made sure of the following:

getItemCount() is the only adapter method being called and is returning a positive integer value, (I know this will be the area you guys will look at)

Constructor is being called, member variables are valid.

Parent View is a vertical LinearLayout; no scrollview, or any other view with their own scroll properties in sight.

containing fragment view is created and shown on screen.

Here is the declaration in the fragment followed by the adapter. Any help would be appreciated as this has be completely baffled.

SubMenuAdapter adapter = new SubMenuAdapter(getActivity(), mContentItems);
    recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    recyclerView.setAdapter(adapter);

public class SubMenuAdapter extends RecyclerView.Adapter<SubMenuAdapter.ViewHolder> {
private static final String TAG = String.format("==> %S", SubMenuAdapter.class.getSimpleName());

private final List<ContentItem> mContentItems;
private Context mContext;

public SubMenuAdapter(Context context, List<ContentItem> contenItems) {
    Log.d(TAG, "Constructor called");
    mContentItems = contenItems;
    mContext = context;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    Log.d(TAG, "onCreateViewHolder called");
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_resource_efficiency, parent, false);
    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    Log.d(TAG, "onBindViewHolder called");

    ContentItem item = mContentItems.get(position);
    holder.textName.setText(item.getName());
    FontSetter.setMyriadProRegular(mContext, holder.textName);
    Picasso.with(mContext).load("file://" + item.getPreviewImageDefault()).into(holder.imageIcon);
}

@Override
public int getItemCount() {
    Log.d(mContext, String.format("getItemCount: %d", mContentItems.size()));
    return mContentItems.size();
}

// ViewHolder
public static class ViewHolder extends RecyclerView.ViewHolder {

    TextView textName;
    ImageView imageIcon;

    public ViewHolder(View view) {
        super(view);
        textName = (TextView) view.findViewById(R.id.tv_resource_efficiency_option);
        imageIcon = (ImageView) view.findViewById(R.id.iv_resource_efficiency_icon);
    }
}


问:
it is possible to stop creating .db-shm and .db-wal files in sqlite database android?
i want to stop creating .db-shm and .db-wal files. i only want .db files in database folder of my data directory.

some older device generate .db-shm and .db-wal while some latest device generate .db-journal.

this things create problem while I am trying to backup/restore my database file.

i wondering if it is possible through code in android?

答:
Yes, It's possible to stop creating both .wal and .shm files. One thing observed is that up to the Android 9 version the System creates .wal and .shm with original .db file and in Android 10 or latest versions such files do not exist but have a new file called with the extension .journal.

To Stop creating files like .wal and .shm, Simply add method in your SQLite helper class as...

```<code>@Override
    public void onOpen(SQLiteDatabase db)
{
        super.onOpen(db);
        db.disableWriteAheadLogging();
}
</code>```

I have solved problems like this way and surely will work in your case as well.

Body:
Yes, It's possible to stop creating both .wal and .shm files. One thing observed is that up to the Android 9 version the System creates .wal and .shm with original .db file and in Android 10 or latest versions such files do not exist but have a new file called with the extension .journal.

To Stop creating files like .wal and .shm, Simply add method in your SQLite helper class as...

@Override
    public void onOpen(SQLiteDatabase db)
{
        super.onOpen(db);
        db.disableWriteAheadLogging();
}

I have solved problems like this way and surely will work in your case as well.


问:
How to compare large text files?
I have a general question on your opinion about my "technique".

There are 2 textfiles (file_1 and file_2) that need to be compared to each other. Both are very huge (3-4 gigabytes, from 30,000,000 to 45,000,000 lines each).
My idea is to read several lines (as many as possible) of file_1 to the memory, then compare those to all lines of file_2. If there's a match, the lines from both files that match shall be written to a new file. Then go on with the next 1000 lines of file_1 and also compare those to all lines of file_2 until I went through file_1 completely.

But this sounds actually really, really time consuming and complicated to me.
Can you think of any other method to compare those two files?

How long do you think the comparison could take?
For my program, time does not matter that much. I have no experience in working with such huge files, therefore I have no idea how long this might take. It shouldn't take more than a day though. ;-) But I am afraid my technique could take forever...

Antoher question that just came to my mind: how many lines would you read into the memory? As many as possible? Is there a way to determine the number of possible lines before actually trying it?
I want to read as many as possible (because I think that's faster) but I've ran out of memory quite often.

Thanks in advance.

EDIT
I think I have to explain my problem a bit more.

The purpose is not to see if the two files in general are identical (they are not).
There are some lines in each file that share the same "characteristic".
Here's an example:
file_1 looks somewhat like this:

```<code>mat1 1000 2000 TEXT      //this means the range is from 1000 - 2000
mat1 2040 2050 TEXT
mat3 10000 10010 TEXT
mat2 20 500 TEXT
</code>```

file_2looks like this:

```<code>mat3 10009 TEXT
mat3 200 TEXT
mat1 999 TEXT
</code>```

TEXT refers to characters and digits that are of no interest for me, mat can go from mat1 - mat50 and are in no order; also there can be 1000x mat2 (but the numbers in the next column are different). I need to find the fitting lines in a way that: matX is the same in both compared lines an the number mentioned in file_2 fits into the range mentioned in file_1.
So in my example I would find one match: line 3 of file_1and line 1 of file_2 (because both are mat3 and 10009 is between 10000 and 10010).
I hope this makes it clear to you!

So my question is: how would you search for the matching lines?

Yes, I use Java as my programming language.

EDIT
I now divided the huge files first so that I have no problems with being out of memory. I also think it is faster to compare (many) smaller files to each other than those two huge files. After that I can compare them the way I mentioned above. It may not be the perfect way, but I am still learning ;-)
Nonentheless all your approaches were very helpful to me, thank you for your replies!

答: I would try the following: for each file that you are comparing, create temporary files (i refer to it as partial file later) on disk representing each alphabetic letter and an additional file for all other characters. then read the whole file line by line. while doing so, insert the line into the relevant file that corresponds to the letter it starts with. since you have done that for both files, you can now limit the comparison for loading two smaller files at a time. a line starting with A for example can appear only in one partial file and there will not be a need to compare each partial file more than once. If the resulting files are still very large, you can apply the same methodology on the resulting partial files (letter specific files) that are being compared by creating files according to the second letter in them. the trade-of here would be usage of large disk space temporarily until the process is finished. in this process, approaches mentioned in other posts here can help in dealing with the partial files more efficiently.</p>

Title: How to compare large text files?

Body:
I have a general question on your opinion about my "technique".

There are 2 textfiles (file_1 and file_2) that need to be compared to each other. Both are very huge (3-4 gigabytes, from 30,000,000 to 45,000,000 lines each).
My idea is to read several lines (as many as possible) of file_1 to the memory, then compare those to all lines of file_2. If there's a match, the lines from both files that match shall be written to a new file. Then go on with the next 1000 lines of file_1 and also compare those to all lines of file_2 until I went through file_1 completely.

But this sounds actually really, really time consuming and complicated to me.
Can you think of any other method to compare those two files?

How long do you think the comparison could take?
For my program, time does not matter that much. I have no experience in working with such huge files, therefore I have no idea how long this might take. It shouldn't take more than a day though. ;-) But I am afraid my technique could take forever...

Antoher question that just came to my mind: how many lines would you read into the memory? As many as possible? Is there a way to determine the number of possible lines before actually trying it?
I want to read as many as possible (because I think that's faster) but I've ran out of memory quite often.

Thanks in advance.

EDIT
I think I have to explain my problem a bit more.

The purpose is not to see if the two files in general are identical (they are not).
There are some lines in each file that share the same "characteristic".
Here's an example:
file_1 looks somewhat like this:

mat1 1000 2000 TEXT      //this means the range is from 1000 - 2000
mat1 2040 2050 TEXT
mat3 10000 10010 TEXT
mat2 20 500 TEXT

file_2looks like this:

mat3 10009 TEXT
mat3 200 TEXT
mat1 999 TEXT

TEXT refers to characters and digits that are of no interest for me, mat can go from mat1 - mat50 and are in no order; also there can be 1000x mat2 (but the numbers in the next column are different). I need to find the fitting lines in a way that: matX is the same in both compared lines an the number mentioned in file_2 fits into the range mentioned in file_1.
So in my example I would find one match: line 3 of file_1and line 1 of file_2 (because both are mat3 and 10009 is between 10000 and 10010).
I hope this makes it clear to you!

So my question is: how would you search for the matching lines?

Yes, I use Java as my programming language.

EDIT
I now divided the huge files first so that I have no problems with being out of memory. I also think it is faster to compare (many) smaller files to each other than those two huge files. After that I can compare them the way I mentioned above. It may not be the perfect way, but I am still learning ;-)
Nonentheless all your approaches were very helpful to me, thank you for your replies!


问:
Append an array to another array

I have a problem with np.append(ar,values, axis=None)

Take a look at following codes:

import numpy as np

array1 = np.array([])
array2 = np.array([1,2])
array3 = np.array([3,4])
array4 = np.array([5,6])

array1 = np.append(array1, array2)
array1 = np.append(array1, array3)
array1 = np.append(array1, array4)

print(array1) # [1. 2. 3. 4. 5. 6.]
```
<p>So this is not what i want i want add exactly the array to the array1
and the array1 should be</p>
```[[1. 2.]
 [3. 4.]
 [5. 6.]]
```

How can i do that?

答:
Try this:

```<code>import numpy as np

array1 = np.array([])
array2 = np.array([1,2])
array3 = np.array([3,4])
array4 = np.array([5,6])
a = np.append(array1, array2)
b = np.append(array1, array3)
c = np.append(array1, array4)
print(np.vstack((a, b, c)))
</code>```

output:

```<code>[[1. 2.]
 [3. 4.]
 [5. 6.]]
</code>```

Title: Append an array to another array

Body:
I have a problem with np.append(ar,values, axis=None)

Take a look at following codes:

import numpy as np

array1 = np.array([])
array2 = np.array([1,2])
array3 = np.array([3,4])
array4 = np.array([5,6])

array1 = np.append(array1, array2)
array1 = np.append(array1, array3)
array1 = np.append(array1, array4)

print(array1) # [1. 2. 3. 4. 5. 6.]

So this is not what i want i want add exactly the array to the array1
and the array1 should be

[[1. 2.]
 [3. 4.]
 [5. 6.]]

How can i do that?

Body:
Try this:

import numpy as np

array1 = np.array([])
array2 = np.array([1,2])
array3 = np.array([3,4])
array4 = np.array([5,6])
a = np.append(array1, array2)
b = np.append(array1, array3)
c = np.append(array1, array4)
print(np.vstack((a, b, c)))

output:

[[1. 2.]
 [3. 4.]
 [5. 6.]]


问:
_UnhandledInput method not working as I expect
I'm new learner of Godot Mono and I couldn't understand why _UnhandledInput method does not work. I don't get any error or warnings either.

using Godot;
using System;

public class GameScene : Node2D
{
    PackedScene towerPackedScene;

    public override void _Ready()
    {
        towerPackedScene = (PackedScene)GD.Load("res://Tower.tscn");
    }

    public override void _Process(float delta)
    {

    }

    public override void _UnhandledInput(InputEvent @event)
    {
        if (@event is InputEventMouseButton mouseButton)
        {
            GD.Print("clicked"); // does not show message on output
            KinematicBody2D tower = (KinematicBody2D)towerPackedScene.Instance();
            tower.Position = mouseButton.Position;
            this.AddChild(tower);
        }
    }
}
```

答:
Presumably the input is not unhandled. In other words, some other node is taking the input (for example with _input).

You are looking for a mouse event. Is there some Control taking the mouse input? Be aware that Controls will take mouse input before other nodes, even if they are behind them. You need to set their mouse_filter to Ignore.

A common gotcha is using a ColorRect or TextureRect for background, and leave it with mouse_filter set to Stop (which is the default), and then being unable to get input.

See Using InputEvent


问:
How to deal with ImmutableMultiDict
I'm trying to test my flask API with a POST request, but I have problems to deal with the ImmutableMultiDict.

The API:

```<code>@app.route("/df/", methods = ['GET', 'POST'])
def get_df():
    if request.method == 'POST':
        select = request.form
</code>```

request:

```<code>curl -X POST http://127.0.0.1:5000/df/ -d '{"ticker": "ETH-PERP"}'
</code>```

print(select):

```<code>ImmutableMultiDict([('{"ticker": "ETH-PERP"}', '')])
</code>```

How do I access the value ("ETH-PERP") ?

I tried:

```<code>select = request.form.getlist("ticker")
</code>```

output: []

```<code>select = request.form.to_dict(flat=True)
print(select[0])
</code>```

output: keyError: 0

```<code>select = request.form.to_dict().values()[0]
</code>```

output: 'dict_values' object is not subscriptable

any suggestions?

答:
The problem is that the request data is not a form, it's JSON.

You should probably use request.json to read it, which should give you a regular dictionary.

Title: How to deal with ImmutableMultiDict

Body:
I'm trying to test my flask API with a POST request, but I have problems to deal with the ImmutableMultiDict.

The API:

@app.route("/df/", methods = ['GET', 'POST'])
def get_df():
    if request.method == 'POST':
        select = request.form

request:

curl -X POST http://127.0.0.1:5000/df/ -d '{"ticker": "ETH-PERP"}'

print(select):

ImmutableMultiDict([('{"ticker": "ETH-PERP"}', '')])

How do I access the value ("ETH-PERP") ?

I tried:

select = request.form.getlist("ticker")

output: []

select = request.form.to_dict(flat=True)
print(select[0])

output: keyError: 0

select = request.form.to_dict().values()[0]

output: 'dict_values' object is not subscriptable

any suggestions?


问:
NodeJS GC function cannot be initialized
Trying out my first NodeJS cloud function so far unsuccessfully despite working fine VS code. Getting following error

```<code>Function cannot be initialized. Error: function terminated.
</code>```

Looking through the logs I see some potential issues

```<code>Detailed stack trace: ReferenceError: supabase_public_url is not defined
Provided module can't be loaded (doesn't specify)
</code>```

Thoughts: Am I doing it wrong with the secret manager and using the pub/sub incorrect?

My Code index.js

```<code>import { createClient } from '@supabase/supabase-js'
import sgMail from "@sendgrid/mail"
import { SecretManagerServiceClient } from '@google-cloud/secret-manager'

//activate cloud secret manager
const client = new SecretManagerServiceClient()

const supabaseUrl = client.accessSecretVersion(supabase_public_url)
const supabaseKey = client.accessSecretVersion(supabase_service_key)
const sendgridKey = client.accessSecretVersion(sendgrid_service_key)

sgMail.setApiKey(sendgridKey)

const supabase = createClient(supabaseUrl, supabaseKey)

// get data for supabase where notifications coins are true
const supabaseNotifications = async() => {
    let { data, error } = await supabase
    .from('xxx')
    .select('*, xxx!inner(coin, xx, combo_change, combo_signal, combo_prev_signal), xxx!inner(email)')
    .eq('crypto_signals.combo_change', true)

    if(error) {
        console.error(error)
        return
    }
    return data
}

//create an array of user emails from supabase data
const userEmail = (data) => {
    try {
        const emailList = []
        for (let i of data) {
            if (emailList.includes(i.profiles.email) != true) {
                emailList.push(i.profiles.email)
            } else {}
        }
    return emailList

    }

    catch(e) {
        console.log(e)
    }
}

// function to take email list and supabase data to generate emails to users
const sendEmail = (e, data ) => {
  try {
    for (let i of e) {
        const signalList = []
        for (let x of data) {
            if(i == x.profiles.email) {
                signalList.push(x)
            } else {}
        }

        // create msg and send from my email to the user
        const msg = {
            to: i,
            from:"xxxx",
            subject: "Coin notification alert from CryptoOwl",
            text: "One or more of you coins have a new signal",
            html: signalList.toString()
        }
        sgMail.send(msg)
        console.log(i)
    }
  }
  catch(e) {
        console.log(e)
    }
}

// main function combines all 3 functions (supabase is await)
async function main(){
    let supabaseData = await supabaseNotifications();
    let supabaseEmails  = userEmail(supabaseData);
    let sendgridEmails = sendEmail(supabaseEmails, supabaseData);
}

exports.sendgridNotifications = (event, context) => {
  main()
};
</code>```

my package.json with type module to use import above

```<code>{
  "type":"module",
  "dependencies":{
    "@sendgrid/mail":"^7.6.1",
    "@supabase/supabase-js":"1.30.0",
    "@google-cloud/secret-manager": "^3.11.0"
  }
}
</code>```

答:
I'm not at all versed in Google Secret Manager but a rapid look at the Node.js library documentation shows (if I'm not mistaking) that accessSecretVersion() is an asynchronous method.

As a matter of facts, we find in the doc examples like the following one:

```<code>async function accessSecretVersion() {
  const [version] = await client.accessSecretVersion({
    name: name,
  });

  // Extract the payload as a string.
  const payload = version.payload.data.toString();

  // WARNING: Do not print the secret in a production environment - this
  // snippet is showing how to access the secret material.
  console.info(`Payload: ${payload}`);
}
</code>```

See https://cloud.google.com/secret-manager/docs/samples/secretmanager-access-secret-version#secretmanager_access_secret_version-nodejs

Body:
Trying out my first NodeJS cloud function so far unsuccessfully despite working fine VS code. Getting following error

Function cannot be initialized. Error: function terminated.

Looking through the logs I see some potential issues

Detailed stack trace: ReferenceError: supabase_public_url is not defined
Provided module can't be loaded (doesn't specify)

Thoughts: Am I doing it wrong with the secret manager and using the pub/sub incorrect?

My Code index.js

import { createClient } from '@supabase/supabase-js'
import sgMail from "@sendgrid/mail"
import { SecretManagerServiceClient } from '@google-cloud/secret-manager'

//activate cloud secret manager
const client = new SecretManagerServiceClient()

const supabaseUrl = client.accessSecretVersion(supabase_public_url)
const supabaseKey = client.accessSecretVersion(supabase_service_key)
const sendgridKey = client.accessSecretVersion(sendgrid_service_key)

sgMail.setApiKey(sendgridKey)

const supabase = createClient(supabaseUrl, supabaseKey)

// get data for supabase where notifications coins are true
const supabaseNotifications = async() => {
    let { data, error } = await supabase
    .from('xxx')
    .select('*, xxx!inner(coin, xx, combo_change, combo_signal, combo_prev_signal), xxx!inner(email)')
    .eq('crypto_signals.combo_change', true)

    if(error) {
        console.error(error)
        return
    }
    return data
}

//create an array of user emails from supabase data
const userEmail = (data) => {
    try {
        const emailList = []
        for (let i of data) {
            if (emailList.includes(i.profiles.email) != true) {
                emailList.push(i.profiles.email)
            } else {}
        }
    return emailList

    }

    catch(e) {
        console.log(e)
    }
}

// function to take email list and supabase data to generate emails to users
const sendEmail = (e, data ) => {
  try {
    for (let i of e) {
        const signalList = []
        for (let x of data) {
            if(i == x.profiles.email) {
                signalList.push(x)
            } else {}
        }

        // create msg and send from my email to the user
        const msg = {
            to: i,
            from:"xxxx",
            subject: "Coin notification alert from CryptoOwl",
            text: "One or more of you coins have a new signal",
            html: signalList.toString()
        }
        sgMail.send(msg)
        console.log(i)
    }
  }
  catch(e) {
        console.log(e)
    }
}

// main function combines all 3 functions (supabase is await)
async function main(){
    let supabaseData = await supabaseNotifications();
    let supabaseEmails  = userEmail(supabaseData);
    let sendgridEmails = sendEmail(supabaseEmails, supabaseData);
}

exports.sendgridNotifications = (event, context) => {
  main()
};

my package.json with type module to use import above

{
  "type":"module",
  "dependencies":{
    "@sendgrid/mail":"^7.6.1",
    "@supabase/supabase-js":"1.30.0",
    "@google-cloud/secret-manager": "^3.11.0"
  }
}

Body:
I'm not at all versed in Google Secret Manager but a rapid look at the Node.js library documentation shows (if I'm not mistaking) that accessSecretVersion() is an asynchronous method.

As a matter of facts, we find in the doc examples like the following one:

async function accessSecretVersion() {
  const [version] = await client.accessSecretVersion({
    name: name,
  });

  // Extract the payload as a string.
  const payload = version.payload.data.toString();

  // WARNING: Do not print the secret in a production environment - this
  // snippet is showing how to access the secret material.
  console.info(`Payload: ${payload}`);
}

See https://cloud.google.com/secret-manager/docs/samples/secretmanager-access-secret-version#secretmanager_access_secret_version-nodejs


问:
How can I convert human time strings into milliseconds?
Here's what I've tried from this question's's accepted answer

const timeString = '1h 30m 1s'
const milliseconds  = timeString.match(/\d+/g)
       .reduce((acc, cur, idx) => acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0)
console.log(milliseconds)
// result: 5401000
// expected result: 5401000
```
<p>But, here's the problem, if I only put <code>1m</code> for instance, expected output should be 60000 milliseconds</p>
<pre class="lang-js prettyprint-override"><code>const timeString = '1m'
const milliseconds  = timeString.match(/\d+/g)
       .reduce((acc, cur, idx) => acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0)
console.log(milliseconds)
// result: 3600000
// expected result: 60000
</code>```

It thinks that the first argument is an hour, then minute followed by second. No matter what I input. So when I put 1m, it thinks that it is an hour. It's a fixed h, m & s format and I am not able to interchange them.

The solution I want is that I should be able to interchange them parse h as hours, m for minutes, and s for seconds no matter what order and able to choose only h, m or s like

If I only output 1m, should output 1 minute only and so on

const timeString = '1m`
// should output 60000
```
<pre class="lang-js prettyprint-override"><code>const timeString = '2h 1s`
// should output 7201000
</code>```

If I interchange them, it should still output the same result since s is a second and h is an hour

const timeString = '1s 2h`
// should output 7201000
```
<pre class="lang-js prettyprint-override"><code>const timeString = '1s`
// should output 1000
</code>```

or interchange them however I want no matter what format I use, and should still output the desired result in milliseconds

const timeString = '1s 6h 2m`
// should output 21721000
```

答:
Split up the string (on spaces) and within the reducer determine what value to use, based on the value of the string (the 'hms' part). In that case you're not dependent on the order of hms and you're able to use 1, 2 or 3 values. Something like:

const toMilliSeconds = ts => ts.split(` `)
  .reduce((acc, cur, i) => {
    const num = parseInt(cur);
    const [isHour, isMinute] = [cur.endsWith(`h`), cur.endsWith(`m`)];
    return (num * (isHour ? 3600 : isMinute ? 60 : 1) * 1000) + acc;
  }, 0);

console.log(`1h 30m 1s = ${toMilliSeconds(`1h 30m 1s`)}ms`);
console.log(`30m 1s = ${toMilliSeconds(`30m 1s`)}ms`);
console.log(`15s = ${toMilliSeconds(`15s`)}ms`);
console.log(`1h = ${toMilliSeconds(`1h`)}ms`);
console.log(`1m = ${toMilliSeconds(`1m`)}ms`);
console.log(`1h 2s = ${toMilliSeconds(`1h 2s`)}ms`);
console.log(`2h 1s = ${toMilliSeconds(`2h 1s`)}ms`);
console.log(`1s 6h 2m = ${toMilliSeconds(`1s 6h 2m`)}ms`);```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper {
    max-height: 100% !important;
}</code>```

If you want to use the original reducer (from the cited answer), this may be an idea for that:

const toMS = ts => {
    let raw = ts.split(` `);
    const hms = `0h 0m 0s`.split(` `)
      .map(v => raw.find(t => t.slice(-1) === v.slice(-1)) || v);

    return hms.join(``)
      .match(/\d+/g)
      .reduce((acc, cur, idx) =>
        acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0);
  };

console.log([
  `1h 30m 1s = ${toMS(`1h 30m 1s`)}ms`,
  `30m 1s = ${toMS(`30m 1s`)}ms`,
  `15s = ${toMS(`15s`)}ms`,
  `1h = ${toMS(`1h`)}ms`,
  `1m = ${toMS(`1m`)}ms`,
  `1s = ${toMS(`1s`)}ms`,
  `1h 2s = ${toMS(`1h 2s`)}ms`,
  `2h 1s = ${toMS(`2h 1s`)}ms`,
  `1s 6h 2m = ${toMS(`1s 6h 2m`)}ms` ].join(`\n`));```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper {
  max-height: 100% !important;
}</code>```

See Stackblitz snippet for both solutions.

Body:
Here's what I've tried from this question's's accepted answer

const timeString = '1h 30m 1s'
const milliseconds  = timeString.match(/\d+/g)
       .reduce((acc, cur, idx) => acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0)
console.log(milliseconds)
// result: 5401000
// expected result: 5401000

But, here's the problem, if I only put 1m for instance, expected output should be 60000 milliseconds

const timeString = '1m'
const milliseconds  = timeString.match(/\d+/g)
       .reduce((acc, cur, idx) => acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0)
console.log(milliseconds)
// result: 3600000
// expected result: 60000

It thinks that the first argument is an hour, then minute followed by second. No matter what I input. So when I put 1m, it thinks that it is an hour. It's a fixed h, m & s format and I am not able to interchange them.

The solution I want is that I should be able to interchange them parse h as hours, m for minutes, and s for seconds no matter what order and able to choose only h, m or s like

If I only output 1m, should output 1 minute only and so on

const timeString = '1m`
// should output 60000

const timeString = '2h 1s`
// should output 7201000

If I interchange them, it should still output the same result since s is a second and h is an hour

const timeString = '1s 2h`
// should output 7201000

const timeString = '1s`
// should output 1000

or interchange them however I want no matter what format I use, and should still output the desired result in milliseconds

const timeString = '1s 6h 2m`
// should output 21721000

Body:
Split up the string (on spaces) and within the reducer determine what value to use, based on the value of the string (the 'hms' part). In that case you're not dependent on the order of hms and you're able to use 1, 2 or 3 values. Something like:

const toMilliSeconds = ts => ts.split(` `)
  .reduce((acc, cur, i) => {
    const num = parseInt(cur);
    const [isHour, isMinute] = [cur.endsWith(`h`), cur.endsWith(`m`)];
    return (num * (isHour ? 3600 : isMinute ? 60 : 1) * 1000) + acc;
  }, 0);

console.log(`1h 30m 1s = ${toMilliSeconds(`1h 30m 1s`)}ms`);
console.log(`30m 1s = ${toMilliSeconds(`30m 1s`)}ms`);
console.log(`15s = ${toMilliSeconds(`15s`)}ms`);
console.log(`1h = ${toMilliSeconds(`1h`)}ms`);
console.log(`1m = ${toMilliSeconds(`1m`)}ms`);
console.log(`1h 2s = ${toMilliSeconds(`1h 2s`)}ms`);
console.log(`2h 1s = ${toMilliSeconds(`2h 1s`)}ms`);
console.log(`1s 6h 2m = ${toMilliSeconds(`1s 6h 2m`)}ms`);

.as-console-wrapper {
    max-height: 100% !important;
}

If you want to use the original reducer (from the cited answer), this may be an idea for that:

const toMS = ts => {
    let raw = ts.split(` `);
    const hms = `0h 0m 0s`.split(` `)
      .map(v => raw.find(t => t.slice(-1) === v.slice(-1)) || v);

    return hms.join(``)
      .match(/\d+/g)
      .reduce((acc, cur, idx) =>
        acc + cur * (Math.pow(60, (2 - idx))) * 1000, 0);
  };

console.log([
  `1h 30m 1s = ${toMS(`1h 30m 1s`)}ms`,
  `30m 1s = ${toMS(`30m 1s`)}ms`,
  `15s = ${toMS(`15s`)}ms`,
  `1h = ${toMS(`1h`)}ms`,
  `1m = ${toMS(`1m`)}ms`,
  `1s = ${toMS(`1s`)}ms`,
  `1h 2s = ${toMS(`1h 2s`)}ms`,
  `2h 1s = ${toMS(`2h 1s`)}ms`,
  `1s 6h 2m = ${toMS(`1s 6h 2m`)}ms` ].join(`\n`));

.as-console-wrapper {
  max-height: 100% !important;
}

See Stackblitz snippet for both solutions.


问:
Why can't I see the image?
project name: mypage

application name: hoge

database: sqlite3

Hmmm, I was able to upload the image.

'mypage/media/uploads'

(models.py)
class Staff(models.Model):
    """shop staff"""
    name = models.CharField('display_name', max_length=50)
    user = models.ForeignKey(get_user_model(), on_delete=models.CASCADE)
    store = models.ForeignKey(Store, verbose_name='shop', on_delete=models.CASCADE)
    # it mean localhost/media/uploads/
    image = models.ImageField(upload_to='uploads/', null=True, blank=True)

    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['user', 'store'], name='unique_staff'),
        ]

    def __str__(self):
        return f'{self.store.name} - {self.name}'
```
<pre class="lang-py prettyprint-override"><code>(settings.py)
  :
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR / 'media/'
MEDIA_URL = '/media/'
</code>```

(urls.py)
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```
<p>I can upload.<br>
<img src="https://i.stack.imgur.com/UbJUW.png" alt="enter image description here" /></p>
<p>I can register to sqlite3<br>
<img src="https://i.stack.imgur.com/Fv2Uj.png" alt="enter image description here" /></p>
<p>I try to load a picture.</p>
<pre class="lang-html prettyprint-override"><code>(calendar.html)
{% extends 'hoge/base.html' %}

{% block content %}

    <h1>{{ staff.store.name }}店 {{ staff.name }}</h1>
    <img src="{{ staff.image.url }}" alt="missing image">
       :
</code>```
```<code>(console)
mypage> python manage.py runserver
  [12/Feb/2022 19:20:49] "GET /booking/staff/1/calendar/ HTTP/1.1" 200 13998
  Not Found: /media/uploads/photo.png
  [12/Feb/2022 19:20:49] "GET /media/uploads/photo.png HTTP/1.1" 404 2254
</code>```

I can display calendar page but nothing the picture

The path seems to match.

The actual picture is in "http://127.0.0.1:8000/booking/media/uploads/photo.png"

No need for "/booking"

What is my perception gap? My head is tired...

The source is on github.

答:
The problem is in the URLs config, remove this line of code

+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) from hoge.urls and put this into config URLs

In your original settings, you have included the hoge app URLs under the booking/ endpoint so that's why your image URLs are attached with booking/.

Update the URLs like this.

```<code>#config.urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('booking/', include('hoge.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
</code>```

And

```<code>#hoge.urls.py
from django.urls import path
from . import views

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
]
</code>```

This will fix the URL problem of loading the image properly.

Title: Why can't I see the image?

Body:
project name: mypage

application name: hoge

database: sqlite3

Hmmm, I was able to upload the image.

'mypage/media/uploads'

(models.py)
class Staff(models.Model):
    """shop staff"""
    name = models.CharField('display_name', max_length=50)
    user = models.ForeignKey(get_user_model(), on_delete=models.CASCADE)
    store = models.ForeignKey(Store, verbose_name='shop', on_delete=models.CASCADE)
    # it mean localhost/media/uploads/
    image = models.ImageField(upload_to='uploads/', null=True, blank=True)

    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['user', 'store'], name='unique_staff'),
        ]

    def __str__(self):
        return f'{self.store.name} - {self.name}'

(settings.py)
  :
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR / 'media/'
MEDIA_URL = '/media/'

(urls.py)
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

I can upload.

I can register to sqlite3

I try to load a picture.

(calendar.html)
{% extends 'hoge/base.html' %}

{% block content %}

{{ staff.store.name }}店 {{ staff.name }}

       :

(console)
mypage> python manage.py runserver
  [12/Feb/2022 19:20:49] "GET /booking/staff/1/calendar/ HTTP/1.1" 200 13998
  Not Found: /media/uploads/photo.png
  [12/Feb/2022 19:20:49] "GET /media/uploads/photo.png HTTP/1.1" 404 2254

I can display calendar page but nothing the picture

The path seems to match.

The actual picture is in "http://127.0.0.1:8000/booking/media/uploads/photo.png"

No need for "/booking"

What is my perception gap? My head is tired...

The source is on github.

Body:
The problem is in the URLs config, remove this line of code

+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) from hoge.urls and put this into config URLs

In your original settings, you have included the hoge app URLs under the booking/ endpoint so that's why your image URLs are attached with booking/.

Update the URLs like this.

#config.urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('booking/', include('hoge.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

And

#hoge.urls.py
from django.urls import path
from . import views

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
]

This will fix the URL problem of loading the image properly.


问:
Data structure that requires a search function in c++
this is our tasks and I don't know what command should I use to put a search function .
it should use a search function to search for the Employee ID No. If found, display the details.
Otherwise, tell the user that record not found. these are the requirements the user inputs 6 employee records with the corresponding data structure fields:
a. ID No
b. Name
c. Age
d. Gender (M/F)
e. Address
f. Salary</p>
```<code>#include<iostream>
#include<string>
#include<sstream>
using namespace std;

struct Info {
    string Id;
    string Name;
    string Age;
    string Gender;
    string Address;
    string Salary;

}i1, i2, i3, i4, i5, i6;

void printdata(Info data);
//storing data
int main() {

    string staff1;
    cout << "ID Number: ";
    getline(cin, staff1);
    cout << "Name: ";
    getline(cin, i1.Name);
    cout << "Age: ";
    getline(cin, i1.Age);
    cout << "Gender(M/F): ";
    getline(cin, i1.Gender);
    cout << "Address: ";
    getline(cin, i1.Address);
    cout << "Salary: ";
    getline(cin, i1.Salary);
    cout << "\n";

    string staff2;
    cout << "ID Number: ";
    getline(cin, staff2);
    cout << "Name: ";
    getline(cin, i2.Name);
    cout << "Age: ";
    getline(cin, i2.Age);
    cout << "Gender(M/F): ";
    getline(cin, i2.Gender);
    cout << "Address: ";
    getline(cin, i2.Address);
    cout << "Salary: ";
    getline(cin, i2.Salary);
    cout << "\n";

    string staff3;
    cout << "ID Number: ";
    getline(cin, staff3);
    cout << "Name: ";
    getline(cin, i3.Name);
    cout << "Age: ";
    getline(cin, i3.Age);
    cout << "Gender(M/F): ";
    getline(cin, i3.Gender);
    cout << "Address: ";
    getline(cin, i3.Address);
    cout << "Salary: ";
    getline(cin, i3.Salary);
    cout << "\n";

    string staff4;
    cout << "ID Number: ";
    getline(cin, staff4);
    cout << "Name: ";
    getline(cin, i4.Name);
    cout << "Age: ";
    getline(cin, i4.Age);
    cout << "Gender(M/F): ";
    getline(cin, i4.Gender);
    cout << "Address: ";
    getline(cin, i4.Address);
    cout << "Salary: ";
    getline(cin, i4.Salary);
    cout << "\n";

    string staff5;
    cout << "ID Number: ";
    getline(cin, staff5);
    cout << "Name: ";
    getline(cin, i5.Name);
    cout << "Age: ";
    getline(cin, i5.Age);
    cout << "Gender(M/F): ";
    getline(cin, i5.Gender);
    cout << "Address: ";
    getline(cin, i5.Address);
    cout << "Salary: ";
    getline(cin, i5.Salary);
    cout << "\n";

    string staff6;
    cout << "ID Number: ";
    getline(cin, staff6);
    cout << "Name: ";
    getline(cin, i6.Name);
    cout << "Age: ";
    getline(cin, i6.Age);
    cout << "Gender(M/F): ";
    getline(cin, i6.Gender);
    cout << "Address: ";
    getline(cin, i6.Address);
    cout << "Salary: ";
    getline(cin, i6.Salary);
    cout << "\n";

    string a;
    cout << "\nEnter Employees ID Number: ";
    getline(cin, a);

    if (a == staff1) {
        printdata(i1);
    }
    else if (a == staff2) {
        printdata(i2);
    }
    else if (a == staff3) {
        printdata(i3);
    }
    else if (a == staff4) {
        printdata(i4);
    }
    else if (a == staff5) {
        printdata(i5);
    }
    else if (a == staff6) {
        printdata(i6);
    }
    return 0;
    }
//layout of data output
void printdata(Info data)
{
    cout << "\n\n";
    cout << "Name: " << data.Name << endl;
    cout << "Age: " << data.Age << endl;
    cout << "Gender: " << data.Gender << endl;
    cout << "Address: " << data.Address << endl;
    cout << "Salary: " << data.Salary << endl;
}
</code>```

答:
This should work:

```<code>#include<iostream>
#include<string>

const int arr_size = 6; // No. of employees you want to store

struct Info {
    std::string Id;
    std::string Name;
    std::string Age;
    std::string Gender;
    std::string Address;
    std::string Salary;

}info[arr_size]{};

void search(int id);

//storing data
int main() {

    for (int i = 0; i < arr_size; i++)
    {
        std::cout << "ID Number: ";
        std::getline(std::cin, info[i].Id);

        std::cout << "Name: ";
        std::getline(std::cin, info[i].Name);

        std::cout << "Age: ";
        std::getline(std::cin, info[i].Age);

        std::cout << "Gender(M/F): ";
        std::getline(std::cin, info[i].Gender);

        std::cout << "Address: ";
        std::getline(std::cin, info[i].Address);

        std::cout << "Salary: ";
        std::getline(std::cin, info[i].Salary);

        std::cout << "\n";
    }

    std::string a;
    std::cout << "\nEnter Employees ID Number: ";
    std::getline(std::cin, a);

    search(atoi(a.c_str()));

    return 0;
}

//layout of data output
void search(int id)
{
    for (int i = 0; i < arr_size; i++)
    {
        if (std::to_string(id) == info[i].Id)
        {
            std::cout << "\n\n";
            std::cout << "Name: " << info[i].Name << std::endl;
            std::cout << "Age: " << info[i].Age << std::endl;
            std::cout << "Gender: " << info[i].Gender << std::endl;
            std::cout << "Address: " << info[i].Address << std::endl;
            std::cout << "Salary: " << info[i].Salary << std::endl;
        }
    }
}
</code>```

To improve this, you can also use a vector, which is essentially a dynamic list type:

```<code>#include <iostream>
#include <string>
#include <vector>
#include <limits>

#undef max

struct Info {
    std::string Id;
    std::string Name;
    std::string Age;
    std::string Gender;
    std::string Address;
    std::string Salary;

}; std::vector<Info> info{};

void search(int id);

//storing data
int main() {

    while (true)
    {
        info.push_back(Info());

        while (true)
        {
            std::cout << "ID Number: ";
            std::getline(std::cin, info[info.size() - 1].Id);

            for (int i = 0; i < info.size() - 1; i++)
            {
                if (info[info.size() - 1].Id == info[i].Id)
                {
                    std::cout << "Duplicate id found!" << std::endl;
                    goto cont;
                }
            }
            break;
            cont: continue;
        }

        std::cout << "Name: ";
        std::getline(std::cin, info[info.size() - 1].Name);

        std::cout << "Age: ";
        std::getline(std::cin, info[info.size() - 1].Age);

        std::cout << "Gender(M/F): ";
        std::getline(std::cin, info[info.size() - 1].Gender);

        std::cout << "Address: ";
        std::getline(std::cin, info[info.size() - 1].Address);

        std::cout << "Salary: ";
        std::getline(std::cin, info[info.size() - 1].Salary);

        std::cout << "\n";

        std::cout << "Do you want to enter more employees? (Y - Yes / N - No)";
        std::string choice; std::getline(std::cin, choice);

        if (std::tolower(choice[0]) != 'y') break;
    }

    std::string a;
    std::cout << "\nEnter Employees ID Number: ";

    std::cin.ignore(std::numeric_limits<std::streamsize>::max(), '\n');
    std::getline(std::cin, a);

    std::cout << "\n\n";
    search(atoi(a.c_str()));

    return 0;
}

//layout of data output
void search(int id)
{
    for (int i = 0; i < info.size(); i++)
    {
        if (std::to_string(id) == info[i].Id)
        {
            std::cout << "Name: " << info[i].Name << std::endl;
            std::cout << "Age: " << info[i].Age << std::endl;
            std::cout << "Gender: " << info[i].Gender << std::endl;
            std::cout << "Address: " << info[i].Address << std::endl;
            std::cout << "Salary: " << info[i].Salary << std::endl;

            return;
        }
    }

    std::cout << "No employee with id: " << id << " found" << std::endl;
}
</code>```

For the std::vector option, I've also added the ability to enter a variable amount of employees, which can be desirable by the user almost all the time. I have also removed the possibility for duplicate id.

If you're using the std::vector option, do make sure to compile with c++11, for eg:

g++

```<code>$ g++ -std=c++11 your_file.cpp
</code>```

Also, you should not use the following line (I've removed it):

```<code>using namespace std;
</code>```

...as it is considered as bad practice.

Body:
this is our tasks and I don't know what command should I use to put a search function .
it should use a search function to search for the Employee ID No. If found, display the details.
Otherwise, tell the user that record not found. these are the requirements the user inputs 6 employee records with the corresponding data structure fields:
a. ID No
b. Name
c. Age
d. Gender (M/F)
e. Address
f. Salary

#include<iostream>
#include<string>
#include<sstream>
using namespace std;

struct Info {
    string Id;
    string Name;
    string Age;
    string Gender;
    string Address;
    string Salary;

}i1, i2, i3, i4, i5, i6;

void printdata(Info data);
//storing data
int main() {

    string staff1;
    cout << "ID Number: ";
    getline(cin, staff1);
    cout << "Name: ";
    getline(cin, i1.Name);
    cout << "Age: ";
    getline(cin, i1.Age);
    cout << "Gender(M/F): ";
    getline(cin, i1.Gender);
    cout << "Address: ";
    getline(cin, i1.Address);
    cout << "Salary: ";
    getline(cin, i1.Salary);
    cout << "\n";

    string staff2;
    cout << "ID Number: ";
    getline(cin, staff2);
    cout << "Name: ";
    getline(cin, i2.Name);
    cout << "Age: ";
    getline(cin, i2.Age);
    cout << "Gender(M/F): ";
    getline(cin, i2.Gender);
    cout << "Address: ";
    getline(cin, i2.Address);
    cout << "Salary: ";
    getline(cin, i2.Salary);
    cout << "\n";

    string staff3;
    cout << "ID Number: ";
    getline(cin, staff3);
    cout << "Name: ";
    getline(cin, i3.Name);
    cout << "Age: ";
    getline(cin, i3.Age);
    cout << "Gender(M/F): ";
    getline(cin, i3.Gender);
    cout << "Address: ";
    getline(cin, i3.Address);
    cout << "Salary: ";
    getline(cin, i3.Salary);
    cout << "\n";

    string staff4;
    cout << "ID Number: ";
    getline(cin, staff4);
    cout << "Name: ";
    getline(cin, i4.Name);
    cout << "Age: ";
    getline(cin, i4.Age);
    cout << "Gender(M/F): ";
    getline(cin, i4.Gender);
    cout << "Address: ";
    getline(cin, i4.Address);
    cout << "Salary: ";
    getline(cin, i4.Salary);
    cout << "\n";

    string staff5;
    cout << "ID Number: ";
    getline(cin, staff5);
    cout << "Name: ";
    getline(cin, i5.Name);
    cout << "Age: ";
    getline(cin, i5.Age);
    cout << "Gender(M/F): ";
    getline(cin, i5.Gender);
    cout << "Address: ";
    getline(cin, i5.Address);
    cout << "Salary: ";
    getline(cin, i5.Salary);
    cout << "\n";

    string staff6;
    cout << "ID Number: ";
    getline(cin, staff6);
    cout << "Name: ";
    getline(cin, i6.Name);
    cout << "Age: ";
    getline(cin, i6.Age);
    cout << "Gender(M/F): ";
    getline(cin, i6.Gender);
    cout << "Address: ";
    getline(cin, i6.Address);
    cout << "Salary: ";
    getline(cin, i6.Salary);
    cout << "\n";

    string a;
    cout << "\nEnter Employees ID Number: ";
    getline(cin, a);

    if (a == staff1) {
        printdata(i1);
    }
    else if (a == staff2) {
        printdata(i2);
    }
    else if (a == staff3) {
        printdata(i3);
    }
    else if (a == staff4) {
        printdata(i4);
    }
    else if (a == staff5) {
        printdata(i5);
    }
    else if (a == staff6) {
        printdata(i6);
    }
    return 0;
    }
//layout of data output
void printdata(Info data)
{
    cout << "\n\n";
    cout << "Name: " << data.Name << endl;
    cout << "Age: " << data.Age << endl;
    cout << "Gender: " << data.Gender << endl;
    cout << "Address: " << data.Address << endl;
    cout << "Salary: " << data.Salary << endl;
}

Body:
This should work:

#include<iostream>
#include<string>

const int arr_size = 6; // No. of employees you want to store

struct Info {
    std::string Id;
    std::string Name;
    std::string Age;
    std::string Gender;
    std::string Address;
    std::string Salary;

}info[arr_size]{};

void search(int id);

//storing data
int main() {

    for (int i = 0; i < arr_size; i++)
    {
        std::cout << "ID Number: ";
        std::getline(std::cin, info[i].Id);

        std::cout << "Name: ";
        std::getline(std::cin, info[i].Name);

        std::cout << "Age: ";
        std::getline(std::cin, info[i].Age);

        std::cout << "Gender(M/F): ";
        std::getline(std::cin, info[i].Gender);

        std::cout << "Address: ";
        std::getline(std::cin, info[i].Address);

        std::cout << "Salary: ";
        std::getline(std::cin, info[i].Salary);

        std::cout << "\n";
    }

    std::string a;
    std::cout << "\nEnter Employees ID Number: ";
    std::getline(std::cin, a);

    search(atoi(a.c_str()));

    return 0;
}

//layout of data output
void search(int id)
{
    for (int i = 0; i < arr_size; i++)
    {
        if (std::to_string(id) == info[i].Id)
        {
            std::cout << "\n\n";
            std::cout << "Name: " << info[i].Name << std::endl;
            std::cout << "Age: " << info[i].Age << std::endl;
            std::cout << "Gender: " << info[i].Gender << std::endl;
            std::cout << "Address: " << info[i].Address << std::endl;
            std::cout << "Salary: " << info[i].Salary << std::endl;
        }
    }
}

To improve this, you can also use a vector, which is essentially a dynamic list type:

#include <iostream>
#include <string>
#include <vector>
#include <limits>

#undef max

struct Info {
    std::string Id;
    std::string Name;
    std::string Age;
    std::string Gender;
    std::string Address;
    std::string Salary;

}; std::vector<Info> info{};

void search(int id);

//storing data
int main() {

    while (true)
    {
        info.push_back(Info());

        while (true)
        {
            std::cout << "ID Number: ";
            std::getline(std::cin, info[info.size() - 1].Id);

            for (int i = 0; i < info.size() - 1; i++)
            {
                if (info[info.size() - 1].Id == info[i].Id)
                {
                    std::cout << "Duplicate id found!" << std::endl;
                    goto cont;
                }
            }
            break;
            cont: continue;
        }

        std::cout << "Name: ";
        std::getline(std::cin, info[info.size() - 1].Name);

        std::cout << "Age: ";
        std::getline(std::cin, info[info.size() - 1].Age);

        std::cout << "Gender(M/F): ";
        std::getline(std::cin, info[info.size() - 1].Gender);

        std::cout << "Address: ";
        std::getline(std::cin, info[info.size() - 1].Address);

        std::cout << "Salary: ";
        std::getline(std::cin, info[info.size() - 1].Salary);

        std::cout << "\n";

        std::cout << "Do you want to enter more employees? (Y - Yes / N - No)";
        std::string choice; std::getline(std::cin, choice);

        if (std::tolower(choice[0]) != 'y') break;
    }

    std::string a;
    std::cout << "\nEnter Employees ID Number: ";

    std::cin.ignore(std::numeric_limits<std::streamsize>::max(), '\n');
    std::getline(std::cin, a);

    std::cout << "\n\n";
    search(atoi(a.c_str()));

    return 0;
}

//layout of data output
void search(int id)
{
    for (int i = 0; i < info.size(); i++)
    {
        if (std::to_string(id) == info[i].Id)
        {
            std::cout << "Name: " << info[i].Name << std::endl;
            std::cout << "Age: " << info[i].Age << std::endl;
            std::cout << "Gender: " << info[i].Gender << std::endl;
            std::cout << "Address: " << info[i].Address << std::endl;
            std::cout << "Salary: " << info[i].Salary << std::endl;

            return;
        }
    }

    std::cout << "No employee with id: " << id << " found" << std::endl;
}

For the std::vector option, I've also added the ability to enter a variable amount of employees, which can be desirable by the user almost all the time. I have also removed the possibility for duplicate id.

If you're using the std::vector option, do make sure to compile with c++11, for eg:

g++

$ g++ -std=c++11 your_file.cpp

Also, you should not use the following line (I've removed it):

using namespace std;

...as it is considered as bad practice.


问:
Uploading Base 64 String/Image to Azure storage image is coming out blank Spring boot
I am trying to store base64 encoded image to azure blob storage. PFB the code snippet for the same.
File is getting created but it is coming as broken image.

Code Snippet

```<code>String mimeType = extractMimeType(imageBase64Encoded).replace("image/", "");
String fileName = "image." + mimeType;
BlobContainerClient containerClient = new BlobContainerClientBuilder()
                .connectionString(connectionString)
                .containerName(containerName)
                .buildClient();
BlobClient client = containerClient.getBlobClient(fileName);
String base64Data = imageBase64Encoded.split(",")[1];
byte[] base64DataBytes = base64Data.getBytes();
ByteArrayInputStream dataStream = new ByteArrayInputStream(base64DataBytes);
client.upload(dataStream, base64DataBytes.length);
</code>```

答:
You need to decode the base64 encoded string to byte[] and use that byte[] to store the image.

String mimeType = extractMimeType(imageBase64Encoded).replace("image/", "");
String fileName = "image." + mimeType;
BlobContainerClient containerClient = new BlobContainerClientBuilder()
                .connectionString(connectionString)
                .containerName(containerName)
                .buildClient();
BlobClient client = containerClient.getBlobClient(fileName);
String base64Data = imageBase64Encoded.split(",")[1];
byte[] base64DataBytes = Base64.getDecoder().decode(base64Data);
ByteArrayInputStream dataStream = new ByteArrayInputStream(base64DataBytes);
client.upload(dataStream, base64DataBytes.length);
```

Body:
I am trying to store base64 encoded image to azure blob storage. PFB the code snippet for the same.
File is getting created but it is coming as broken image.

Code Snippet

String mimeType = extractMimeType(imageBase64Encoded).replace("image/", "");
String fileName = "image." + mimeType;
BlobContainerClient containerClient = new BlobContainerClientBuilder()
                .connectionString(connectionString)
                .containerName(containerName)
                .buildClient();
BlobClient client = containerClient.getBlobClient(fileName);
String base64Data = imageBase64Encoded.split(",")[1];
byte[] base64DataBytes = base64Data.getBytes();
ByteArrayInputStream dataStream = new ByteArrayInputStream(base64DataBytes);
client.upload(dataStream, base64DataBytes.length);


问:
How to insert text rendered with CSS in CKEditor?
I am programming some plugins that insert elements like pictures and tables inside the editor. What I need is to see these elements in the editor rendered with their final aspect. I mean, I need to add css classes to the editor and use them to render text in the editor, and I want to do it on the fly, seing those elements rendered in the editor.

Is there any way to do it? Can I see the elementes correctly rendered inside the editor inserting them with a plugin?

Thank you!

答:
Yes you can.

You will have a dropdown list in your editor, where you can select configured CSS styles to be applied in your content.

How to do it you can find in the documentation:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles


问:
How can I show the key in an object in mui-datatable?
I tried defining it this way:

```<code>   {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          {
            Object.entries(value).map(([key, value]) => {
              return key;
            });
          }
        },
      },
    },
</code>```

And I will receive this error in the console.

Warning: Each child in a list should have a unique "key" prop.

If I'll console.log(value), I can see the data in the console.

```<code>  customBodyRender: (value, tableMeta, updateValue) => {
             console.log(value)
            },
</code>```

How can I show the access they key and display it?

答:
As the error

Warning: Each child in a list should have a unique "key" prop.

states, React requires children in an array to have a stable identity allowing React to identify which elements have been changed, added or removed during the component lifecycle. The identity is assigned to components with the key prop. The docs are very clear about this. In fact, it is recommended to use a string that is unique among all list siblings.

Assumed that the object keys, e. g. Black and Gold, are unique, you could do something along those lines to use them as component keys and also display them in the table:

    {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return Object.entries(value).map(([key, value]) => {
            return
{key}
;
          });
        },
      },
    }
```

Body:
I tried defining it this way:

   {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          {
            Object.entries(value).map(([key, value]) => {
              return key;
            });
          }
        },
      },
    },

And I will receive this error in the console.

Warning: Each child in a list should have a unique "key" prop.

If I'll console.log(value), I can see the data in the console.

  customBodyRender: (value, tableMeta, updateValue) => {
             console.log(value)
            },

How can I show the access they key and display it?

Body:
As the error

Warning: Each child in a list should have a unique "key" prop.

states, React requires children in an array to have a stable identity allowing React to identify which elements have been changed, added or removed during the component lifecycle. The identity is assigned to components with the key prop. The docs are very clear about this. In fact, it is recommended to use a string that is unique among all list siblings.

Assumed that the object keys, e. g. Black and Gold, are unique, you could do something along those lines to use them as component keys and also display them in the table:

    {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return Object.entries(value).map(([key, value]) => {
            return <p key={key}>{key}</p>;
          });
        },
      },
    }