1

Im trying to add a page that creates Qrcode by using react-qr-code.

Everything works normal until I include these following letters "ÅÄÖ" in value.
Does anyone has any clue why i cannot use "ÅÄÖ" in value?

I refer to this page codesandbox. but this page works even i have "ÅÄÖ" in value. so i dont really understand why it does work with my code. its pretty exactly the same....

Here is my component

import React from 'react';
import { connect } from 'react-redux';
import { createQRcode } from '../../actions/labelActions';
import QRCode from "react-qr-code";


class OrderCeateQRcode extends React.Component {

    componentDidMount() {
        const labelID = this.props.match.params.id;
        this.props.createQRcode(labelID);
    };

    render() {
        let labeldetail = this.props.labeldetail || [];

        const Aritcle = labeldetail[0] ? labeldetail[0].name : 'ERROE!';
        const Content = Aritcle + ':innehåller smör';

        return (
            <div className = "row">
                <div className="col-sm">
                    <QRCode
                        value={ Content }
                        renderas="svg"
                        style={{
                        width: "70vmin",
                        height: "70vmin"
                        }}
                    />
                </div>
            </div>            
        );
    }
}


const mapStateToProps = (state) => {
    return {
        labeldetail:state.order.labeldetails,
    };
};
  
  
const mapDispatchToProps = dispatch => {
    return({
        createQRcode: (labelID) => dispatch(createQRcode(labelID)),  
    })
}


export default connect(mapStateToProps,mapDispatchToProps)(OrderCeateQRcode);

sassy.M
  • 27
  • 6
  • Could you share version numbers of the packages used? – Caramiriel Mar 28 '22 at 10:56
  • thanks for the reply. im using "react-qr-code": "^2.0.3", "react-dom": "^16.8.0", "react": "^16.8.0", – sassy.M Mar 28 '22 at 10:59
  • 1
    As for the sandbox, it uses `qrcode.react`, while you report the usage`react-qr-code` which is already a difference. That library uses an (old) version of qr.js which doesn't support that kind of characters (https://github.com/neocotic/qrious/issues/62). I think its best to choose a different library (other than `react-qr-code`). – Caramiriel Mar 28 '22 at 11:18
  • 1
    OMG it worked after i changed it to qrcode.react!! i was not paying attention to that one! thanks for your help! – sassy.M Mar 28 '22 at 11:22
  • No problem. Feel free to answer your own question :) I don't need the rep – Caramiriel Mar 28 '22 at 11:25

0 Answers0