Im working in React JS and it seems that the jsx file doesnt recognize the att. Is that possible? Here is my code:
<div className="LoginFormContainer">
<h1>
Welcome to <strong> {APP_TITLE} </strong>
</h1>
</div>
Related
I my react app, I am using react markdown for rendering the blog content. How can we add multiple classes to the ReactMarkdown. At the moment I have used dataArea class alone, but i would need to use below classes for styling purpose. Could someone please advise ?
.blogImageSection
.dataArea
.dataDate
.tags
.readmoreLink
.dataArea p
. views
csb link for reference : https://codesandbox.io/s/great-bardeen-9lsog5?file=/src/App.js
// react markdown usage:
{ popularResults.map (({id, blogdetails, tags, createdAt }) => (
<ReactMarkdown className='dataArea' remarkPlugins={[remarkGfm]}>{blogdetails}
</ReactMarkdown>
))}
This is the normal blog where I have used the above classes without using react markdown
<a key={id} href="my url">
<div key={id} className='blogImageSection'>
<img alt="id" src={photo} />
<div key={id} className='dataArea'>
<span key={id} className='dataDate'>{date}</span>
<span className='tags'>cypress</span>
<h3>{heading}</h3>
<p>
Best heading added here.
The most relevant data added here.
Greatest of all time. Print the whole text here.
Ideas are always usefull....
</p>
<a href="_blank" className="readmoreLink">
Read more →
</a>
<span className='views'>
{topViews > 999 ? (topViews / 1000).toFixed(2) + "K" : topViews}
</span>
</div>
</div>
</a>
you can add all classes like this:
className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
I use Grapesjs editor. And now I know only 1 way to store the content.
The situation is the following:
I have Grapesjs block 'About us' which I populate with child cards components. And then I get the content with editor.getHtml() and I may get something like this:
<section class="sect-home-about">
<div class="container">
<div class="title-sect"><h2>Über uns</h2></div>
<div class="about-wrap">
<div class="about-line" id="i94s">
<div class="about-itm">
<div class="about-itm-inner">
<a href="#" class="about-itm-photo"><span class="img-inner-box" id="im8d1">
<img src="/css/img/square.png" alt="base"/>
<img src="/img/about/1.png" alt="" title="" class="main-img"/></span></a>
<div class="about-itm-txt">
<div class="about-itm-name">Andrea</div>
<div class="about-itm-brief">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie mehr lesen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And this I can save to DB and then show on front-end. But I don't want to store useless html. Here the editable items should be .title-sect, .about-itm-name, .about-itm-bries and image data. I would like to store only json data and then display it on front-end with correct html, because html is the same and I know it..
Is there such a solution ?
After your GrapesJS is initialized, inside your event add the following code for getting the JSON data output.
JSON.stringify(editor.getComponents())
Here, Component overrides the toJSON function, hence this works.
Parsing Error: Unterminated JSX contents. Not sure why it keeps on saying that I need another tag. Also, the one thing that I have trouble with is what to do with the self-closing HTML tags. I don't know what to do with them for JSX.
I have tried to match all of the tags and used Atom to create an Html file and a bracket matcher. I have no idea why it keeps giving me this error. I thought to add a starting tag for the self-closing tags.
import React from 'react';
import linkedinIcon from "./footer-component/linkedin-icon.png";
export default class Resume extends React.Component {
render(){
return (
<div className="container">
<div className="col-md-12">
<h1>Résumé</h1>
<h3>SUMMARY</h3>
<p>Passionate front-end web developer with 3 years of experience using JavaScript, HTML5, CSS, Bootstrap and Javascript frameworks to build the users experience and user interface for client-facing webpages. Specializes in React, HTML, Bootstrap,
and CSS</p>
<hr>
</hr>
<h3>Technical Skills</h3>
<ul>
<li>Front-end</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap 4</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Embedded JavaScript</li>
<li>REACT</li>
</ul>
<li>Other</li>
<ul>
<li>Git</li>
<li>GitHub</li>
</ul>
</ul>
<h3>Work Experience</h3>
<p>Operations Summer Intern, Benetech | Palo Alto, California | 2019 - 2019</p>
<ul>
<li>Created more than 20 landing pages in HTML5, CSS3, and Bootstrap 4</li>
<li>Implemented CSS/Bootstrap to design multiple responsive web pages</li>
<li>Maintained front-end code and documentation standards</li>
</ul>
<hr>
</hr>
<h3>Education</h3>
<div className="row">
<div className="col-md-2">
Expected in 06/2020
</div>
<div className="col-md-10">
<p><b>High School Diploma</b>
<br></br>
<b>Fusion Academy</b> - Palo Alto</p>
</div>
</div>
);
} // END OF RENDER
} // END OF Resume
Parsing error: Unterminated JSX contents. Hope errors are gone.
You didn't close two top div elements (.container and .col-md-12)
You are missing two </div> tags at the end for .container and .col-md-12.
Also, you should probably use <hr /> only, without the closing tag. HTML says:
Start tag: required, End tag: forbidden
<hr></hr> is valid XHTML, but you should use the above for compatibility reasons.
I need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...