Page Refresh Necessary for Route re-Load in ReactJS? - javascript

I have set up a few routes (menu links labeled Home|About|What I Do|Experience) for my portfolio site like so using BrowswerRouter..
When I click on any of the links the components do not load on the page or at least they are not rendering properly. In order for them to load I have to refresh the page. I know this is not the appropriate behavior. I am still learning the way of React Router. I need help with understanding why this behavior is happening and resolving this issue. Below is the import I used and the render set up I have. I just want to reiterate that when I refresh the page once I have routed to the component I want, it renders and loads correctly.
Thank you fellow coders!
A few files for your reference and the Git Repo :-)
App.js
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css";
import Introduction from "./components/introduction";
import About from "./components/about";
import WhatIDo from "./components/whatido";
import Timeline from "./components/timeline";
import Footer from "./components/footer";
const App = () => {
const [email, setEmail] = useState("");
const [summary, setSummary] = useState("");
const [myLinks, setMyLinks] = useState([]);
useEffect(() => {
fetch("https://gitconnected.com/v1/portfolio/kevindennyii")
.then((response) => response.json())
.then((data) => {
//setName(data.basics.name);
setEmail(data.basics.email);
setSummary(data.basics.summary);
setMyLinks(data.basics.profiles);
});
}, []);
return (
<Router>
<div id="colorlib-page" style={{ backgroundColor: "#F4F5F4" }}>
<div
id="container-wrap"
style={{ marginLeft: "5rem", marginRight: "5rem" }}
>
<div>
<section
className="colorlib-experience"
style={{
marginTop: "0px",
marginBottom: "0px",
paddingBottom: "0px",
paddingTop: "0px",
}}
data-section="home"
>
<Introduction myLinks={myLinks} email={email} />
<nav style={{ textAlign: "center" }}>
<Link to="/">Home</Link>|<Link to="/about">About</Link>|
<Link to="/expertise">What I Do</Link>|
<Link to="/experience">Experience</Link>
</nav>
</section>
<hr className="divider gradient" contentEditable />
</div>
<Switch>
{/* use the render attribute to pass props to the route with the */}
{/* arrow function because this will update the component as opposed to */}
{/* component={() => <Dashboard isAuthed={true} /> */}
<Route
path="/about"
render={(props) => <About {...props} summary={summary} />}
/>
<Route path="/expertise" render={() => <WhatIDo />} />
<Route path="/experience" component={Timeline} />
</Switch>
</div>
<Footer />
</div>
</Router>
);
};
export default App;
Couple of components
whatido.jsx
import React from "react";
const WhatIDo = () => {
return (
<section className="colorlib-about" data-section="whatido">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">What I do?</span>
<h2 className="colorlib-heading">Here are some of my expertise</h2>
</div>
</div>
<div className="row row-pt-md">
<div className="col-md-4 text-center animate-box">
<div className="services color-1">
<span className="icon">
<i className="icon-bulb" />
</span>
<div className="desc">
<h3>Web Development </h3>
<p>
I have experience building websites using Content Management
Systems like Wordpress. I have professional experience coding
in JavaScript, HTML, CSS, and object-oriented languages.
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-3">
<span className="icon">
<i className="icon-phone3" />
</span>
<div className="desc">
<h3>Data Structures & Algorithms</h3>
<p>
As coming from the CS background, I have good grasp over
fundamental concepts of DSA
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-5">
<span className="icon">
<i className="icon-data" />
</span>
<div className="desc">
<h3>Dev Ops</h3>
<p>
I am Amazon Web Services (AWS) certified as a Developer
Associate. I have 3 years of experiences in configuring and
managing data solution with AWS
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default WhatIDo;
timeline.jsx
import React from "react";
// TODO
const Timeline = () => {
return (
<div>
<section className="colorlib-experience" data-section="timeline">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">highlights</span>
<h2 className="colorlib-heading animate-box">Timeline</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="timeline-centered">
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Director of Operations at{" "}
<a
href="https://www.ohhdennyservices.com"
style={{ color: "#2c98f0" }}
target="_blank"
rel="noopener noreferrer"
>
OhhDenny Services, LLC
</a>{" "}
<br />
<span>June 2015 - present</span>
</h2>
<div>
<p>
We assist smaller business, mostly concentrating on
HIPPA, with Cyber Security, Software & Hardware
Installation and Updates, and Network Configuration.
We also build websites using Content Management
Systems like WordPress and technologies such
JavaScript, CSS3 & HTML5.{" "}
</p>
<p>
Network Upgrade for Ideal Nursing Services, Inc.: For
this project, I hired two other professionals to
assist with taking Ideal Nursing from a wired network
to a wireless network. Measurements of the building
were taken to create proper network diagrams for
approval by Ideal Nursing. Wires were removed and
Wireless Access Points (WAPs) were then installed and
configured. All machines were upgraded and/or
configured to connect to the WAPs. In addition, a new
rack with POE ports was installed in their server room
for their server, multi-port hub and router. This
created a more efficient working space and alleviated
unnecessary clutter.
</p>
<div>
Websites:
<ul>
<li>
<a
href="https://jacobdavidproperties.com/"
target="_blank"
rel="noopener noreferrer"
>
Jacob David Properties, LLC
</a>{" "}
- Selma , TX
</li>
<li>
<a
href="https://www.diamondgrovebaptist.com"
target="_blank"
rel="noopener noreferrer"
>
Diamond Grove Baptist Church, Inc
</a>{" "}
- Franklin, VA
</li>
<li>
<a
href="https://www.oberryamezionchurch.org"
target="_blank"
rel="noopener noreferrer"
>
O'Berry A. M. E. Zion Church
</a>{" "}
- Franklin, VA
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInTop"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-4">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Engineer at iHeartMedia, Inc <br />
<span>Feb 2019 - July 2020</span>
</h2>
<p>
Currently working on iHeartMedia's Music Lab team. I
assist in the maintaining and improving of a web
application that assist in helping program directors of
iHeartRadio stations determine how air time (spins) for
songs will be distributed across radio stations. I am
working as both a Software Engineer and Data Analytics
team liaison on the Music Lab team. Some of my tasks
include architecting solutions with NodeJS, automating
AWS CodeBuilds using CloudWatch events for our MySQL
databases, improving technical documentation, and
learning both our data analytics and software
development stack (ReactJS) for Music Lab.
</p>
<p>
I conducted a Proof of Concept analysis to present to VP
of Data Engineering & Analytics for using an aiWare
platform that uses GraphQL. This was an idea to help
iHeartMedia automate the analysis of some of its market
data like spots and digital impression
</p>
<p>
Previously apart of the Salesforce team, working with
the Campaign Recap application which kept track of
iHeartMedia's clients radio ad campaigns. I briefly
worked with our Kibana instance in attempt to improve
logging. I updated our software architecture. I also
performed a technical analysis with Vertione One in
using there development platform with GraphiQ that could
possible help iHeartMedia automate some of its
processes.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Lead Technologist at Booz Allen Hamilton, Inc <br />
<span>Oct 2015 - Jan 2019</span>
</h2>
<div>
I have written training documentation for the Air Force
serving as an Elastic Stack Subject Matter Expert (SME)
creating Elastic Stack training courses. This included
modules for:
<ul>
<li>The Overview of Elastic Stack</li>
<li>The understanding and use of Elasticsearch</li>
<li>The understanding and use of Logstash</li>
<li>
The understanding and use of Kibana The
understanding of Beats
</li>
</ul>
I have created learning documentation for server
configuration (Puppet) and YAML
<br />
<br />
I participated as a member of an Agile Coaching team for
the Air Force, practicing Scrum using Sprints. I wrote
guidance for development teams such as how-to-guides and
best practices for use of Agile methodologies.
<br />
<br />
I served as a member of the DoD community working as an
Application Lead/Senior Developer working with and
managing Amazing Web Services (AWS) EC2 instances
building a Java application that would create and
maintain IT disaster recovery plans.
<br />
<br />
I lead and participated on projects working with
technologies such as PostgreSQL, MongoDB, ExpressDB,
AngularJS and NodeJS (MEAN) web development, Java and
other Microsoft technologies.
<br />
<br />
Internally, for Booz Allen Hamilton, I have configured
and implemented a prototype website using Drupal with
Acquia cloud.
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-6">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Senior Web Developer at Sevatec, Inc <br />
<span>Nov 2014 - Jun 2015</span>
</h2>
<p>
I fulfilled the role of Web Developer as a member of the
Implementation Team for Content Management System (CMS),
redesigning of the <b>US Embassy websites</b> at the IIP
bureau of the <b>Department of State</b>. We were part
of the UI/UX team with this task. We conducted wireframe
testing, user interviews, and analysis on the both
tasks.
<br />
<br />
As a web developer, I was responsible for the
development of websites and mobile applications on
Amazon Web Services (AWS) via WordPress, assisting with
technical documentation and end-user training &
development transition plans. I participated in weekly
calls with WordPress VIP and Automattic (creators and
founders of WordPress) to receive guidance towards
implementing possible solutions for the client. I also
created and implemented the US Embassy Travel Alert
Wordpress plugin which incorporates travel warnings and
alerts using a JSON file from travel.state.gov.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Buchanan & Edwards, Inc <br />
<span>Nov 2013 - Oct 2014</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Creative Information Technology,
Inc
<br />
<span>May 2010 - Oct 2013</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-2">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Web Developer/IT Consultant at Intepros Federal
Consulting, Inc
<br />
<span>Sep 2009 - Apr 2010</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-1">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
IT Specialist at IBM, Inc <br />
<span>Aug 2007 - Sep 2009</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry begin animate-box"
data-animate-effect="fadeInBottom"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-none" />
</div>
</article>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Timeline;
Nothing really showing up in the console when I inspect either...


I discovered the issues was not a React Router issues at all. It was in fact a CSS issue with this specific code found in my style.css
.js .animate-box {
opacity: 0;
}
when the routes are rendering their components, respectively the opacity is automatically set to 0. Once the page is refreshed it that using the opacity as only a transition. If I comment out the opacity, the components showed without having to refresh the page

Related

gatsby load custom script specific page every visit

i have a blog website that i write using gatsby and i tried to load a isso custom script for specific page, which is my article page.
It load for once only and it didn't load after i visit the page again
im using Script element for it
here's my custom script component:
const Comment = ({post_id}) => {
return (
<>
<Script data-isso="//comments.example.ltd/"
src="//comments.example.ltd/js/embed.min.js"
id={post_id}
/>
</>
)
}
and here's the main layout for my article page
<Base>
<div className="post template">
<SEO title="{`${post.title}" | ${config.siteTitle}`} />
<div className="post page">
<div className="article figure">
<div className="HeaderContainer">
<small className="sub">
{post.date}
</small>
<h1 className="title">
{post.title}
</h1>
</div>
<MDXProvider>
{children}
</MDXProvider>
</div>
</div>
</div>
<Comment post_id={post.title}/>
</Base>

Why Mac VoiceOver doesn't detect after mounting ReactJs Component?

I have this code in App.js. Mac's voice over can detect all the elements on this page and it keeps spelling out the text on each one by one.
const WelcomePage = () => {
const [isWarningPage, setisWarningPage] = useState(false);
if (!isWarningPage) {
return (
<>
<div class="container-fluid">
<div className="welcome-section">
<div className="logo-container">
<img src={logo} alt="" />
</div>
<div className="welcome-content">
<h2 aria-level="1">Welcome to My Website</h2>
<h5 aria-level="5">
Connecting you to my web.
</h5>
<h5 className="child2" aria-level="5">
We are happy to see you.
</h5>
</div>
<div>
<button
onClick={() => setisWarningPage(true)}
id="GetStartedBtn"
aria-label="Get Started"
>
Get Started
</button>
</div>
</div>
</div>
</>
);
}
return PhishingWarningPage;
};
But, when I click on the "Get Started" button, Mac's Voice Over cannot detect the mounted component (Warning page). Then I focused the element using some javascript. Why does it happens?
What are my options here?
Thank you!

Transition between 3 different classes

I would like my website to transition between showing the three different sets of text below but I don't know where to start. The idea is it will initially say:
Your
Charity
365 Partner
then it will swap to:
Your
Education
365 Partner
If anyone could help guide me in the right direction, thank you.
<section>
<div class="containerBody">
<div class="BodyImages">
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br>
365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
Discover
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br>
365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
Find out more
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br>
365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
Get in touch
</div>
</div>
</div>
</section>

You need to add JavaScrip to make it work. Using the setInterval, you can make the function run every couple seconds.
var sections = [
document.getElementById("section1"),
document.getElementById("section2"),
document.getElementById("section3")
]
var on = 0
setInterval(function() {
sections[on].style.display = "none"
on += 1
if (on == sections.length) {
on = 0
}
sections[on].style.display = "block"
}, 1000) // The number is the time (in milliseconds) for each flip
#seciont1 {
display: block;
}
#section2,
#section3 {
display: none;
}
<section>
<div class="containerBody">
<div class="BodyImages">
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1" id="section1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br> 365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
Discover
</div>
<div class="tes-banner__content p-1" id="section2">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br> 365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
Find out more
</div>
<div class="tes-banner__content p-1" id="section3">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br> 365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
Get in touch
</div>
</div>
</div>
</section>
Change the 1000 to change the amount of time between each flip. It is in milliseconds, so 1000 is equal to 1 second.

Trying to pull a text string from block of HTML

I'm trying to pull a text string (an article title) from a piece of HTML. In this case, it's "Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways."
The problem is, the title doesn't have any identifiers I can see. It's in a few places in the HTML, but the divs it's in don't have stable names.
I tried:
var url = $(uCW).find('[href^="https://l.facebook"]').text();
But get the wrong chunk of text. (uCW is the variable name I gave to the div this is all in — it works fine for grabbing other information here). Really, I'm having trouble figuring out how to select it — in theory I could specify the exact children everything is in, but the children change a lot and I'd like to use a more stable method.
<div class="_1dwg _1w_m _q7o" data-vc-ignore-dynamic="1">
<div></div>
<div class="_4r_y">
<div class="_6a uiPopover _5pbi _cmw _b1e _1wbl" id="u_fetchstream_4_6"><a aria-label="Story options" data-testid="post_chevron_button" class="_4xev _p" aria-haspopup="true" aria-expanded="false" rel="toggle" href="#" role="button" id="u_fetchstream_4_7"></a></div>
</div>
<div>
<div class="v_zhq0t5rr6 _5eit p_zhq0tbcbb clearfix">
<div class="clearfix c_zhq0t5thj">
<a target="" class="_5pb8 u_zhq0tbcb8 _8o _8s lfloat _ohe" title="Person" aria-hidden="true" tabindex="-1" data-ft="{"tn":"m"}" href="https://www.facebook.com/j.newsham?fref=nf&__tn__=%2Cdm-R-R&eid=ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2Cdm-R-R%22%2C%22eid%22%3A%22ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ%22%7D" data-hovercard-prefer-more-content-show="1">
<div class="_38vo">
<!-- react-mount-point-unstable -->
<div><img class="_s0 _4ooo _5xib _5sq7 _44ma _rw img" src="https://scontent-ort2-2.xx.fbcdn.net/v/t1.0-1/p112x112/38427941_10156325214622324_8412493305270501376_n.jpg?_nc_cat=110&_nc_sid=dbb9e7&_nc_ohc=e5WgZHVuabcAX-4npCK&_nc_ht=scontent-ort2-2.xx&_nc_tp=6&oh=eb95679d9ee7fb5be65b6bdb23dcf7b2&oe=5ECE2ADB" alt="" aria-label="Person" role="img"></div>
</div>
</a>
<div class="clearfix _42ef">
<div class="rfloat _ohf"></div>
<div class="l_zhq0t5thg">
<div>
<div class="_6a _5u5j">
<div class="_6a _6b" style="height:40px"></div>
<div class="_6a _5u5j _6b">
<h5 class="_7tae _14f3 _14f5 _5pbw _5vra" data-ft="{"tn":"C"}" id="js_9e"><span class="fwn fcg"><span class="fwb fcg" data-ft="{"tn":";"}"><a title="Person" href="https://www.facebook.com/j.newsham?__tn__=%2CdC-R-R&eid=ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB&hc_ref=ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc&fref=nf" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2CdC-R-R%22%2C%22eid%22%3A%22ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB%22%2C%22hc_ref%22%3A%22ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc%22%2C%22fref%22%3A%22nf%22%7D" data-hovercard-prefer-more-content-show="1" data-hovercard-referer="ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc">Person</a></span></span></h5>
<div class="_5pcp _5lel _2jyu _232_" id="feed_subtitle_675172323:7304407797214710582" data-testid="story-subtitle">
<span class="z_zhq0t6o5b"><span class="fsm fwn fcg"><a class="_5pcq" href="/j.newsham/posts/10157963951497324" target=""><abbr data-utime="1588120184" title="Tuesday, April 28, 2020 at 7:29 PM" data-shorten="1" class="_5ptz timestamp livetimestamp"><span class="timestampContent" id="js_9f">16 hrs</span></abbr></a></span></span><span class="_6spk" role="presentation" aria-hidden="true"> · </span>
<div class="_6a _29ee _4f-9 _43_1" data-hover="tooltip" data-tooltip-content="Shared with: Person's friends" role="img" aria-label="Shared with: Person's friends"><span><i class="_1lbg img sp_Ke6ZUJH-N4S_1_5x sx_73b6dc"></i></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="userContent"></div>
<div class="_3x-2" data-ft="{"tn":"H"}">
<div data-ft="{"tn":"H"}">
<div class="mtm">
<div id="u_fetchstream_4_1" class="_6m2 _1zpr clearfix _dcs _4_w4 _41u- _59ap _2bf7 _64lx _3eqz _20pq _3eqw _2rk1 _359m _3n1j _5qqr" data-ft="{"tn":"H"}">
<div class="clearfix _2r3x">
<div class="lfloat _ohe">
<span class="_3m6-">
<div class="_63yw">
<div class="_6ks">
<a href="https://gizmodo.com/journalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262?utm_campaign=Gizmodo&utm_content&utm_medium=SocialMarketing&utm_source=facebook&fbclid=IwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ" aria-describedby="u_fetchstream_4_3" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" tabindex="-1" target="_blank" rel="noopener nofollow" data-lynx-mode="asynclazy" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ&h=AT0v6E7lQPPlUT-t8yQbu0DBEukuzdXli3s4pdRZxCF9EVtUE0omFYcc-fOtFYQJIHWOVgDfrGhVsH4T3uqimv560qNSBhRnwdM_iCwl4BQJ1f9r5rrk9K1zibH3nA9ZhUT6-YdcIkm7lBZtJYn6SKbWmmPzJsBUI-LcjNoQHXw">
<div class="accessible_elem inlineBlock" id="u_fetchstream_4_3">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
<div class="_6l- __c_">
<div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:514px;height:268.42222222222px;"><img class="scaledImageFitWidth img" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" data-src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" style="top:0px;" alt="" width="514" height="269" aria-label="photo of Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways image"></div>
</div>
</a>
</div>
<a class="_34js _8o63 _1kaa _34jt _34ju _2cpc" ajaxify="/feed/article_context/dialog/?share_id=10157963951502324&entry_type=news_feed_learn_more&trigger_log_id=bd3a8ea2-29fb-4ee2-b335-c27d26be3c85&ft_msg=mf_story_key.10157963951497324%3Atop_level_post_id.10157963951497324%3Atl_objid.10157963951497324%3Acontent_owner_id_new.675172323%3Athrowback_story_fbid.10157963951497324%3Astory_location.4%3Astory_attachment_style.share" href="#" rel="dialog-post" data-ft="{"tn":"-T"}" role="button" data-hover="tooltip" data-tooltip-content="Show more information about this link" data-tooltip-alignh="right" id="u_fetchstream_4_8"><i class="_34k2"></i></a>
</div>
<div class="_3ekx _29_4">
<div class="_6m3 _--6">
<div class="_59tj _2iau">
<div>
<div class="_6lz _6mb _1t62 ellipsis">gizmodo.com</div>
<div class=""></div>
</div>
</div>
<div class="_3n1k">
<div class="mbs _6m6 _2cnj _5s6c">Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways</div>
<div class="_6m7 _3bt9">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</div>
</div>
<a href="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR2sRF3AjujE4KgspWs5ltmxgtABX46iAmdHGCVxDmWSzYu93cO_d1EMMfc&h=AT1duKty7qVugflB4dskMMBn6j1M0FJ-cneezEPDTrI6c2IcEKkCT1YZ6-8Bw2oad-n0gZZBFU5Mk-iTNkLo-up1anlYj_l_pIvZEVXz-2WPYAeQrILewicbiMd8Gj6ziLDys5z7PLZy2syfD1-HTufQ12efucyRp3hHa8mCcvGyPH1jtw" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" aria-describedby="u_fetchstream_4_2" rel="noopener nofollow" tabindex="-1" target="_blank" class="_52c6" data-lynx-mode="asynclazy">
<div class="accessible_elem" id="u_fetchstream_4_2">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</a>
</div>
</span>
</div>
<div class="_42ef"><span class="_3c21"></span></div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>

You can get the text e.g. by selecting a href starting with l.facebook that contains an element with the class name accessible_elem using :has() as this element contains the text.
var copy = $(uCW).find('[href^="https://l.facebook"]:has(".accessible_elem")')
.find(".accessible_elem").text();
Update: As mentioned as comment, this does not target the wanted text. Instead, it's possible to read out the aria-label attribute of this link as it contains the right text:
var copy = $(ucw).find('[href^="https://l.facebook"]:has(".accessible_elem")').attr("aria-label");

How to find first link and wrap entire div in its href?

I would like to use JavaScript to find the first link in a div (the learn more link) and wrap the entire div with that href dynamically.
How can I revise this code so it does this?
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap("<a href=''></a>", function() {
a.href = $('a:first', this).attr('href');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>

Clone the element and remove the text content then wrap by it
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $('a:first', this).clone().text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
Or by creating new a tag
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $("<a/>", {
href: $('a:first', this).attr('href')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>

Categories