We Keep Coding

As soon as I insert some lines of code in react js (Module-Typical) The result gets blank

I just started working in react.js and was making my first project but I am facing some errors in the react modules. Tried the same in 2 compilers VS code and WebStorm but the same result is displayed in both
I don't know whether the problem is in module or code.
Without these specific lines of Typical Module the Output is fine but as soon as the typical block is added whole page gets void/blank. What could be the possible solutions or either I have a misplaced div I am not able to figure this out.
the code:-
import React from "react";
import Typical from 'react-typical'
export default function Profile() {
return (
<div className="profile-container">
<div className="profile-parent">
<div className="profile-details">
<div className="colz">
<a href="https://github.com/Akshit492">
<i className="fa fa-github"></i>
</a>
<a href="https://wa.me/918968796492">
<i className="fa fa-whatsapp"></i>
</a>
<a href="https://www.instagram.com/akshitk492/">
<i className="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/akshit-singla-codinghero">
<i className="fa fa-linkedin-square"></i>
</a>
<a href="https://twitter.com/AkshitSingla15">
<i className="fa fa-twitter"></i>
</a>
</div>
<div className="profile-details-name">
<span className="primary-text">
{" "}
Hello, I'M <span className="highlighted-text">Akshit</span>
</span>
</div>
Code which i add here and result gets blank
<div className='profile-details-role'>
<span className='primary-text2'>
{" "}
<h1>
{" "}
<Typical
loop={Infinity}
steps={[
"Enthusiastic Dev",
1000,
"Full Stack Developer",
1000,
"Competetive Coder",
1000,
"Student",
1000,
]}
/>
</h1>
</span>
</div>
Rest Code:-
</div>
</div>
</div>
);
}
With Typical output is:-
[enter image description here][1]
Without Typical output is:-
[enter image description here][2]
[1]: https://i.stack.imgur.com/6dzIK.png
[2]: https://i.stack.imgur.com/XvFP9.png

convert html to html string in JS file

I want to create some html via JS, therefore I need to write the html inside the JS file like:
function createHtmlSection() {
return "<li class=\"chapter up-wrapper-btn\">" +
"<div>" +
"<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
"<label contenteditable=\"true\">section 1</label>" +
"</div>" +
"</li>";
}
is there a tool or some shortcut to create this type of html string?
I mean, in this case I was needed to type all this html by hand. with + and needed to add " sign.
Something that can convert this:
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
to the first string that I was needed to type by hand

You can use a template literal (note the back-ticks). The literal supports multiline, and you won't need to escape the quotes (you'll need to escape back-ticks).
`<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
Example:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection();
<ul id="root"></ul>
You can also pass parameters to the function, and insert them to the string using expression interpolation:
function createHtmlSection(label) {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">${label}</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection('!!! section !!!');
<ul id="root"></ul>

update your JS file to:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button>
<i class="fa fa-plus" onclick="addSection('up',this)"></i>
</button>
<label contenteditable="true">section 1</label>
</div>
</li>
`
}
Read this link for more information:
template literals

You can also use ' (one quote) so you dont have to put / front every "

Just use template literals (not a single quote "'" but the back-tick "`") like this:
// JavaScript
document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
<!-- HTML -->
<div id="a"></div>
Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with
them. They were called "template strings" in prior editions of the
ES2015 specification.
Via - MDN Web Docs

An alternative method is to use single quotes and escape the newline character.
Something like this:
function createHtmlSection() {
return '<li class="chapter up-wrapper-btn">\
<div>\
<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
<label contenteditable="true">section 1</label>\
</div>\
</li>';
}
console.log(createHtmlSection());
Swapping to single quotes saves you from escaping the double quotes in the HTML, but you still need to quote the single quotes.
Another alternative is to use an array and .join('') it:
function createHtmlSection() {
return [
'<li class="chapter up-wrapper-btn">',
'<div>',
'<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
'<label contenteditable="true">section 1</label>',
'</div>',
'</li>'
].join('');
}
console.log(createHtmlSection());
This allows you to easily add/edit/delete parts of the code later on.
Both of these options are for ES5 or older.
For modern browser, please use the ES6 version provided by Ori Drori.

inserting html into getElementById("id").innerHTML

I changing HTML near the top of my website using JS and its not working I was having a similar problem earlier because the quotations were messing it up but i tried to fix it with that method but it still isn't working.
document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";

document.getElementById("accTabs").innerHTML = "<a onclick=\"document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Please try like this snippet.
Your error is raised because you used quote incorrectly.
document.getElementById("accTabs").innerHTML = "<a onclick="alert('ok')"></a>";
If you try like this code, then double quote inside double quote will cause the problem.
You need to change this like below to escape the problem
document.getElementById("accTbs").innerHTML = "<a onclick=\"alert('ok')\"></a>";
You could also use ES6 template literal. then you can use double quote and single quote inside string without any problem.
document.getElementById("accTabs").innerHTML = `<a onclick="alert('ok')"></a>`;

document.getElementById("accTabs").innerHTML = "<a onclick=\" document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>

Just properly escape your " with \" and use ' to wrap the string, reducing escapes
document.getElementById("accTabs").innerHTML = '<a onclick="document.getElementById(\'id01\').style.display=\'block\'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>';
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
Moreover, you could also try ES6's backtick ` to even completely avoid escaping.
document.getElementById("accTabs").innerHTML = `<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>

try using template strings as shown below
document.getElementById("accTabs").innerHTML = `<a
onclick="document.getElementById('id01').style.display='block'" class="w3-bar-
item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
This would work.
Learn more about Templete strings Here

Trying to call js function from php and pass php html string as argument

Here is the problem which I am facing.
echo "<script type='text/javascript'>window.insertCartInHeader({$cart});</script>";
$cart variable is holding HTML block of code.
I get Uncaught SyntaxError: Unexpected token <
Solution?
window.insertCartInHeader = function(cart){
console.log(cart)
var list = $("#top-links").append('<ul id="cart-header"></ul>').find('#cart-header');
list.append('<li>'+cart+'</li>');
}
Here is the string which I am passing
'<div id="cart">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="heading dropdown-toggle">
<div class="pull-left flip"><h4></h4></div><span id="cart-total">0 item(s) - £0.00</span></button>
<ul class="dropdown-menu">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
' (length=402)

You need to add quotes ("), to let javascript know it's a string, and you should use addslashes, since you may have classes or attributes in that html.
echo "<script type='text/javascript'>window.insertCartInHeader(\"". addslashes($cart) . "\");</script>";
Without addslashes something like this, won't work:
$html = '<h1 class="hi">It works</h1>';
For multiline html, this should work.
str_replace("\n", "\\", addslashes($cart));
You can improve that replace, but you get the idea.

SyntaxError: missing ) after argument list in jquery whilst appending

I am getting this error! missing ) even through there seems nothing wrong in my jquery line.
$('.product_area').append('
<div class="product">
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">
<img src="<?php echo image_check('+json[i].product_image1+'); ?>" />
</div>
</a>
<div class="product_details"><div class="product-name">
<a class="name" href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'">
<span><?php echo substr('+json[i].product_name+',0,23); ?></span>
</a>
</div>
<div class="product-price">
<span class="price"># Rs. <?php echo number_format('+json[i].product_price+',2); ?></span>/-</div>
<div class="product-discount">
<span class="discount">Discount:
<span class="color-text"><?php echo '+json[i].product_discount+' ?></span>%</span>
</div>
</div>
</div>').animate({width:'toggle'},150);
I have tried to write it as clean as possible. Can anyone check! It's irritating a lot

This looks like a problem with splitting up a string over multiple lines. (Also you have a typo, as others have commented. If this is an error in your code you'll need to fix it, but if it's just a typo here on SO here's the other problem you're facing)
There are a couple of ways you could go about solving this.
1) If you can use ES6, consider using string templates with `` (backticks). This solution might look like this:
let html = `<div class="product">
<a href="/index.php?store=${store_username}&view=single&product...`
Notice that you don't need to use + in this solution, you can just use ${var_name} and get the value of your variable. You can also split over multiple lines and be OK. I think you could also just replace the entire string in your append() method with a string template and be good.
2) Prepackage your HTML into a variable before appending it, using the += operator. Here it might look something like this:
var html = '<div class="product">';
html += '<a href="/index.php?store=';
html += $store_username;
html += '&view=single&product=';
And so on, and then you would
.append(html);
3) Finally, you can split lines with the \
... .append('<div class="product"> \
<a href="/index.php?store= \
'+$store_username+'&view=single&product=' ... );

change this line
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">
to
<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id+'"><div class="product-image">

How about this?
$('.product_area').append('<div class="product">\
<a href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'"><div class="product-image">\
<img src="<?php echo image_check(\'+json[i].product_image1+\'); ?>" />\
</div>\
</a>\
<div class="product_details"><div class="product-name">\
<a class="name" href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'">\
<span><?php echo substr(\'+json[i].product_name+\',0,23); ?></span>\
</a>\
</div>\
<div class="product-price">\
<span class="price"># Rs. <?php echo number_format(\'+json[i].product_price+\',2); ?></span>/-</div>\
<div class="product-discount">\
<span class="discount">Discount: \
<span class="color-text"><?php echo \'+json[i].product_discount+\' ?> </span>%</span>\
</div>\
</div>\
</div>').animate({width:'toggle'},150);