How to write script tag? Not working properly....

[MeRahulAhire]

Hi, can you please me how to write the script tag using React-Helmet in my react application?

As per your npm docs, i should be using it in this way :

<script type="application/ld+json">{`
        {
            "@context": "http://schema.org"
        }
    `}</script>

and when i tried to excute it in my project,

import React, { Component } from 'react'
import './component_style/telinput.css'
import {Helmet} from "react-helmet";
export class telinput extends Component {
    render() {

        return (
            <div>
                <Helmet>
                    <script type="application/ld+json">{`
                    {
                        const img = document.querySelector('#img');
        const select = document.querySelector('#country');
        const tel = document.getElementById('tel');

        let prevVal = select.value; 

        if(tel.value) tel.value = `${select.value}${tel.value}`;
        else tel.placeholder = `${select.value}${tel.placeholder}`;

        tel.addEventListener('change', ({ target }) => {
        const reg = new RegExp(`(^${prevVal} )`);
        if (reg.test(target.value)) tel.value = tel.value.replace(reg, target.value);
        else tel.value = `${select.value}${target.value}`;
        });

        select.addEventListener('change', ({ target }) => {
        const reg = new RegExp(`(^${prevVal})`);
        if(tel.value) tel.value = `${target.value}${tel.value.replace(reg, '')}`;
        else tel.placeholder =  tel.placeholder.replace(reg, target.value);
        prevVal = target.value;
        });
        select.addEventListener('change', function() {
        img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
        });
                    }`} 
                    </script>
                </Helmet>
            <div className="tel-input">
        <div className="tel-mechanism">
            <div className="select-box">
            <img src="https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png" id="img"/>
             <select id="country">
                 <option value="" hidden>Select Country</option> 
                 <option data-countryCode="AF" value="93">Afghanistan (+93)</option>
                 <option data-countryCode="AL" value="355">Albania (+355)</option>
                 <option data-countryCode="DZ" value="213">Algeria (+213)</option>
                 <option data-countryCode="AS" value="1684">American Samoa (+1684)</option>
                 <option data-countryCode="AD" value="376">Andorra (+376)</option>
                 <option data-countryCode="AO" value="244">Angola (+244)</option>
                 <option data-countryCode="AI" value="1264">Anguilla (+1264)</option>
                 <option data-countryCode="AQ" value="672">Antartica (+672)</option>
                 <option data-countryCode="AG" value="1268">Antigua &amp; Barbuda (+1268)</option>
               </select>
            </div>
            <div className="input-box">
             <input type="tel" placeholder ="956 826 4457" alt="" id="tel"/>
            </div>

        </div>
     </div>
     </div>
        )
    }
}

export default telinput

and it renders this error:

Failed to compile
./src/form/components/telinput.js
  Line 42:36:  Parsing error: Unexpected token, expected "}"

  40 |         let prevVal = select.value; 
  41 | 
> 42 |         if(tel.value) tel.value = `${select.value}${tel.value}`;
     |                                    ^
  43 |         else tel.placeholder = `${select.value}${tel.placeholder}`;
  44 | 
  45 |         tel.addEventListener('change', ({ target }) => {

Whats the solution to it?

your help will be extremely valuable for me Thanks...

[alex1290]

Hi, You declare variable in the string and then you want to use it. It is the reason of this error (Unexpected token).

And this type of script is use for do seo (put jsonLd in it). You can put your code in the componentDidMont(lifecycle).

Hope this can help you!

[rakesh0r]

@MeRahulAhire DId you found fix i am also facing same issue

Following is the snippet i am using <script type="text/javascript"> {xx.xx({ xx: "xx", xx​: "xx", xx​:"xx", xx: "xx" }).x();} </script>

getting this exception Uncaught SyntaxError: Invalid or unexpected token