1

The front end is React/JS and I have the following div:

<div>
          <Modal
            isOpen={openCfcOverlay}
            style={customStyles}
            contentLabel="modal"
          >
            <div className="download-content">
              <div id="download-title">Please make sure your Information is Correct...</div>
              <form id="download-reach-form" onSubmit={(event) => this.handleSubmit(event)}>
                  <Input
                    errorMessage='Please enter a valid Street Address'
                    error={cfcDeclaration.companyAddress1Error}
                    title="Street Address"
                    type="text"
                    name="Street Address"
                    value={typeof selectedCompany == 'undefined' ? "" : selectedCompany.streetAddress1}
                    disabled='edit'
                  />
                  <Input
                    errorMessage='Please enter a valid Street Address Cont.'
                    error={cfcDeclaration.companyAddress2Error}
                    title="Street Address Cont."
                    type="text"
                    name="Street Address Cont."
                    value={typeof selectedCompany == 'undefined' ? "" : selectedCompany.streetAddress2}
                    disabled='edit'
                  />
            </div>
          </Modal>

In the index.template.html file, utf-8 is set:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8">

But in the UI, the 'é' symbol is displayed as 'é".

Example: Amelié = Amelié

Street Address

It looks like a front-end issue, but how do I solve this in React?

The back-end is Java, and the configuration is done through Maven. This is also set-up to be utf-8:

 <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

The street address is passed to the back-end as json:

public addressRequest(JSONObject jsonObject) {
        this.streetAddress1 = (String) jsonObject.get("streetAddress1");
        this.streetAddress2 = (String) jsonObject.get("streetAddress2");

@GET
    @PermitAll
    @Path("/download")
    @ApiOperation(value = "Get information")
    @ApiResponses(value = { @ApiResponse(code = 404, message = "not found")})

    Response exportInfo(
            @CookieParam(value = "userId") String userId,
            @CookieParam(value = "token") String token,
            @ApiParam(value = "streetAddress", required = true) @QueryParam("streetAddress") String streetAddress
    ) throws GeneralSecurityException, IOException;

But I feel like the culprit is the front-end as I can see the wrong address name while inspecting elements via the dev tools:

<input class="input-component" type="text" name="Street Address" value="Amelié" data-reactid=".2.0.0.1.4.0.1">

instead of Amelié.

The index.less for input-component if it matters...

.input-component {
    background: #ECECEC;
    border: 2px solid #ECECEC;
    color: #000;
    display: inline-block;
    font-weight: normal;
    width: 226px;
    &.wide {
      width: 484px;
    }
}
  .input-component::-webkit-input-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component:-moz-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component::-moz-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component:-ms-placeholder {
    color: @black;
    opacity: 1 !important;

I've tried many things but can't get the é to display. I know it's a utf-8 issue because I used an online tool that converts strings to utf-8 and I got 'é' from the incorrect symbols. What else can I do ?

stacknoob
  • 49
  • 7
  • Is the JSON file saved in the UTF-8 encoding? – Naetmul Feb 24 '21 at 04:21
  • This is the third time (close to exactly) the same question has been asked. [5 Days ago]( https://stackoverflow.com/questions/66270644/in-javascript-my-text-field-does-not-recognize-special-symbols-in-a-name-é-cha), [Yesterday](https://stackoverflow.com/questions/66317281/character-encoding-issue-in-java-js-with-the-é-character-in-a-field) - So the common dinominator is most likely your Postgresql database or server character encoding. Here is the reference for that in [Postgresql](https://www.postgresql.org/docs/9.3/multibyte.html); – Randy Casburn Feb 24 '21 at 05:08
  • Here are two related SO overflow questions too: https://stackoverflow.com/questions/6511682/problem-ordering-accented-characters-in-postgresql-8-4 -- https://stackoverflow.com/questions/20952893/postgresql-encoding-problems-on-windows-when-using-psql-command-line-utility – Randy Casburn Feb 24 '21 at 05:09
  • Ok but I haven't gotten an answer... Postgres is utf-8, the character is stored correctly.. so why would it be the db ? – stacknoob Feb 24 '21 at 05:10

0 Answers0