hello I need help this happened to me when I tried to write in Arabic

[ibra7002]

import React, { Component, Suspense } from 'react'; import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; import { Link } from 'react-router-dom'; import './NavMenu.css'; import { useTranslation } from "react-i18next"; import * as ReactBootStrap from 'react-bootstrap'; import { CustomProvider } from 'rsuite'; import ar_EG from 'rsuite/locales/ar_EG'; import utf8, { decode } from 'utf8';

/import { loading } from '../components/loading';/

export class NavMenu extends Component { static displayName = NavMenu.name;

constructor (props) { super(props);

this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
  collapsed: true
};

}

toggleNavbar () { this.setState({ collapsed: !this.state.collapsed }); }

Text(text) {
    const { t, i18n } = useTranslation('common');
    return <h1>{t('welcome.title')}</h1>

}

render() {

    const LANG = {
        "DE": {
            hello: 'Hallo'
        },
        "EN": {
            hello: 'Hello'
        },
        "FA": {
            hello: "سلام"
        }
    }

    function describe(text) {

            var forge = require('node-forge');
           /* var text = "سح";*/
            var bytes = forge.util.encodeUtf8(text);
            var encoded = forge.util.encode64(bytes);
            console.log("encoded", encoded);
            var decodedBytes = forge.util.decode64(encoded);
            var decoded = forge.util.decodeUtf8(decodedBytes);
            console.log("decoded", decoded);

    };

  return (

  <header>
    <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
              <Container>
                  <NavbarBrand tag={Link} to="/" ><text>{describe('شيشسي')}</text> </NavbarBrand>
        <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
        <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
          <ul className="navbar-nav flex-grow">

            <NavItem>
                            <NavLink tag={Link} className="text-dark" to="/company">company</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink tag={Link} className="text-dark" to="/governorate">governorate</NavLink>
                          </NavItem>
            <NavItem>
                            <NavLink tag={Link} className="text-dark" to="/district">district</NavLink>
                        </NavItem>

                        <NavItem>
                            <NavLink tag={Link} className="text-dark" to="/users">users</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink tag={Link} className="text-dark" to="/village">village</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink tag={Link} className="text-dark" to="/MainView">MainView</NavLink>
                        </NavItem>
          </ul>
        </Collapse>
      </Container>
    </Navbar>
          </header>

);

} }

[yosion-p]

Maybe you could try iconv-lite, I've tried it, The results are good and there's no mistaken code.

[ibra7002]

yosion-p thanks so much for reply , but I can not put it in code can you give me example in Arabic thanks

I tried this , but doesn't work var iconv = require('iconv-lite'); var buffer = iconv.encode("شيشسي", "utf8"); var buf = iconv.decode(buffer, 'utf8');

buf always show this text ?????

[yosion-p]

sorry,I think you just needed to convert between a string and a buffer,it's will be ok.

var buffer = iconv.encode("شيشسي", "utf8");

you will get a Buffer

iconv.decode(buffer, 'utf8');

then you will get a string that before the conversion.

perhaps, i didn't catch what you want.

[ibra7002]

thanks for reply , I tried the code but still didn't work I don't know what is the problem

    var iconv = require('iconv-lite');
          var buffer = iconv.decode(iconv.encode('شيشسي', 'utf8'),'utf8');

  return (

  <header>
    <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
              <Container>
                  <NavbarBrand tag={Link} to="/" >{buffer} </NavbarBrand>

[yosion-p]

did you add <meta charset='utf8'> in <head>? like this:

[ibra7002]

Thanks for reply yes this line was at index.html at ClientApp\public folder but still doesn't work

[yosion-p]

did you get the Buffer? it's should be like this:

[ibra7002]

thanks for reply but this is the output

[ibra7002]

thanks for the help , I found the issue that package named reactstrap doesn't support Arabic