We Keep Coding

Toggle Button JavaScript Code Not Working in React JS

I just want to ask help with the comment section down below of the JavaScript Code. I want to work the toggle button / hamburger button but it does not work because addEventListener is not required for ReactJS. What code must be encoded? Thank you.
I am doing a Traversy Media Tutorial using Tailwind CSS. I want to use React as framework because of its composable component feature and efficiency to use.
import React from 'react';
import logo from '../images/logo.svg';
// const btn = document.getElementById('menu-btn')
// const nav = document.getElementById('menu')
// btn.addEventListener('click', () => {
// btn.classList.toggle('open')
// nav.classList.toggle('flex')
// nav.classList.toggle('hidden')
// })
const Navbar = () => {
return (
<div>
<nav className='relative container mx-auto p-6'>
{/* Flex Container */}
<div className='flex items-center justify-between'>
{/* Logo */}
<div className='pt-2'>
<img src={logo} alt='logo.svg'></img>
</div>
{/* Menu Items */}
<div className='hidden space-x-6 md:flex'>
<a href='/' className='hover:text-darkGrayishBlue'>
Pricing
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Product
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
About Us
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Careers
</a>
<a href='/' className='hover:text-darkGrayishBlue'>
Community
</a>
</div>
{/* Button */}
<div>
<a
href='/'
className='hidden p-3 px-6 pt-2 text-white bg-brightRed rounded-full baseline hover:bg-brightRedLight md:block'
>
Get Started
</a>
</div>
{/* Hambuger Icon */}
<button
id='menu-btn'
className='block hamburger md:hidden focus:outline-none'
>
<span className='hamburger-top'></span>
<span className='hamburger-middle'></span>
<span className='hamburger-bottom'></span>
</button>
</div>
{/* Mobile Menu */}
<div className='md:hidden'>
<div
id='menu'
className='absolute flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md'
>
<a href='/'>Pricing</a>
<a href='/'>Product</a>
<a href='/'>About</a>
<a href='/'>Careers</a>
<a href='/'>Community</a>
</div>
</div>
</nav>
</div>
);
};
export default Navbar;

What you could do is define an open state and a click listener for the button.
Then change the class of the objects based on the open flag:
import React from 'react';
import logo from '../images/logo.svg';
const Navbar = () => {
const [open, setOpen] = useState(false);
const handleMenuClick = () => {
setOpen((prev) => !prev);
};
return (
<div>
<nav className='relative container mx-auto p-6'>
{/* Flex Container */}
<div className='flex items-center justify-between'>
{/* ... */}
{/* Hambuger Icon */}
<button
id='menu-btn'
className={`block hamburger md:hidden focus:outline-none ${
open && 'open'
}`}
onClick={() => handleMenuClick()}
>
<span className='hamburger-top'></span>
<span className='hamburger-middle'></span>
<span className='hamburger-bottom'></span>
</button>
</div>
{/* Mobile Menu */}
<div className='md:hidden'>
<div
id='menu'
className={`absolute flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md ${
open ? 'flex' : 'hidden'
}`}
>
<a href='/'>Pricing</a>
<a href='/'>Product</a>
<a href='/'>About</a>
<a href='/'>Careers</a>
<a href='/'>Community</a>
</div>
</div>
</nav>
</div>
);
};
export default Navbar;
```

You need to define the event handling where you define your button. In your case, it would look something like this:
<button
id='menu-btn'
className='block hamburger md:hidden focus:outline-none'
onClick={doAction}>
>
Official documentation regarding event handling in react.

Stick a Material UI Input when scrolling

I want to make the Material UI Input stick at the top when scrolling, I have a modal an its content is the search input and the results.
I used overflow-y: scroll; in <div className="modal-content"> and used position: sticky; in <OutlinedInput className="SearchInput" /> but then the search and the results scroll together which I don't want it to, I want only the result to scroll.
Then I removed the overflow-y: scroll; from in <div className="modal-content"> and put it in <div className="card" key={post._id}> but then the results went outside the modal borders as in the Image down below
The Code:
return (
<>
<button onClick={toggleModal} className="btn-modal">
<SearchIcon />
</button>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<div className="searchBar">
<div style={{ padding: 20 }}>
<div font-size="20px" className="searchTry">Search</div>
<OutlinedInput
className="SearchInput"
placeholder='Search...'
onChange={(e) => searchItems(e.target.value)}
endAdornment={
<InputAdornment>
<SearchIcon />
</InputAdornment>
}
/>
<div style={{ marginTop: 20 }}>
{searchInput.length > 0 ? (
filteredResults.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="results-title">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
) : (
APIData.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="card-name">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
)}
</div>
</div>
</div>
<button className="close-modal" onClick={toggleModal}>
<CloseIcon />
</button>
</div>
</div>
)}
</>
);

How to add active class on div on link click inside of div

I want to add active class to the parent element of the div, but the problem is this code is adding on double click not on single click, how to fix this.
The below code is for the sidebar which I want to show on my website, everything is fine but the problem is the handleActiveClass function is not working on single click.
import React from 'react';
import { Link } from 'react-router-dom';
import './Sidebar.css';
const Sidebar = ({ sidebarOpen, closeSidebar, handleLogout }) => {
let logoUrl = JSON.parse(localStorage.getItem('app_icon'));
const handleActiveClass = (e) => {
e.target.parentElement.classList.toggle('active_menu_link');
};
return (
<div id='sidebar' className={sidebarOpen ? 'sidebar-responsive' : ''}>
<div className='sidebar_title'>
<div className='sidebar_img'>
<img src={`https://stucharge.bakersbrisk.com${logoUrl}`} alt='logo' />
<h1>Admin Panel</h1>
</div>
<i className='fa fa-times' id='sidebaricon' onClick={closeSidebar}></i>
</div>
<div className='sidebar_menu'>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-home'></i>
<Link to='/home'>Dashboard</Link>
</div>
<h2>MNG</h2>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-user-circle'></i>
<Link to='/profile'>Profile </Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-book'></i>
<Link to='/subjects'>Subjects </Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-graduation-cap'></i>
<Link to='/courses'>Courses</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-book-open'></i>
<Link to='/notes'>Notes</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-chalkboard-teacher'></i>
<Link to='/class'>Online Class</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-handshake-o'></i>
<Link to='/contact'>Contact Developer</Link>
</div>
<h2>LEAVE</h2>
<div className='sidebar_logout'>
<i className='fa fa-power-off'></i>
<Link to='/' onClick={handleLogout}>
Log out
</Link>
</div>
<div
className='dev'
style={{ position: 'absolute', bottom: '20px', left: '8px' }}
>
<h3 style={{ color: '#51c4d3' }}>
Developed by{' '}
<i
className='far fa-thumbs-up'
style={{ fontSize: '1.6rem', marginLeft: '4px' }}
></i>
</h3>
<h2 style={{ color: '#b0efeb' }}>Codeven Solution</h2>
</div>
</div>
</div>
);
};
export default Sidebar;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
This code might not run here, but you can understand it as i have pasted the whole code.

How to convert a React class-based component into a functional component?

Here is my code for a React "class" based component for a carousel slider that I want to convert into a functional component, but I don't understand how.
import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";
export default class extends React.Component {
render() {
return (
<div>
<h1 className="blog_heading">Testimonials</h1>
<div className="testimonial">
<div
id="carouselExampleSlidesOnly"
className="carousel slide"
data-ride="carousel"
>
<div className="carousel-inner container">
<div className="carousel-item active">
<div className="testimonial_content">
<a href={web}>
<img
src={web}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1>Nisha Sinha</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
It's a big thanks for helping me a lot in achieving my
goal of JRF. All the lectues were so helpful and i really
learned from basic to the top and my doubts got cleared
whenever needed and really all the faculties helped with
quality videos ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web1}>
<img
src={web1}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Pooja Dhayal</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
Dive to learn helped me to achieve my goals.I cleared UGC
NET exam in December ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web2}>
<img
src={web2}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Parul</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
>
Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
learn faculties.your video
”
</ReactReadMoreReadLess>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}

Solution
For your current implementation, only bullet point #1 of the explanation applies (see below). Therefore, the functional component should look like this:
import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";
export default () => {
return (
<div>
<h1 className="blog_heading">Testimonials</h1>
<div className="testimonial">
<div
id="carouselExampleSlidesOnly"
className="carousel slide"
data-ride="carousel"
>
<div className="carousel-inner container">
<div className="carousel-item active">
<div className="testimonial_content">
<a href={web}>
<img
src={web}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1>Nisha Sinha</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
It's a big thanks for helping me a lot in achieving my
goal of JRF. All the lectues were so helpful and i really
learned from basic to the top and my doubts got cleared
whenever needed and really all the faculties helped with
quality videos ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web1}>
<img
src={web1}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Pooja Dhayal</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
Dive to learn helped me to achieve my goals.I cleared UGC
NET exam in December ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web2}>
<img
src={web2}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Parul</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
>
Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
learn faculties.your video
”
</ReactReadMoreReadLess>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Explanation
There are a few things to keep in mind when you want to swap from a class component to a functional component.
Change the header from a class header into a function header. You would need to change this:
export default class extends React.Component {
render() {
return (
// ...something
);
}
}
To this
export () => {
return (
// ...something
);
}
Update the usage of props if there's any. Assume that you use this.props somewhere in your component. You need to accept props as a parameter of your functional component and use that instead of this.props.
export (props) => {
console.log(`This is the props: ${props}`);
return (
// ...something
);
}
Use the useState hook instead of this.state and this.setState. Learn more
If you ever have to use the life cycle functions (componentDidMount,...), consider learning more about the useEffect hook. Learn more

A functional component is just a function that returns some jsx so the basic format of the function should look like this:
const Name = (props) => {
return (
<div>Your jsx</div>
)
}
I changed yours to a function real quick, not sure if this is all you needed? Were you having errors with the web componenets when you changed them?
import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";
const newComp = props => {
return (
<div>
<h1 className="blog_heading">Testimonials</h1>
<div className="testimonial">
<div
id="carouselExampleSlidesOnly"
className="carousel slide"
data-ride="carousel"
>
<div className="carousel-inner container">
<div className="carousel-item active">
<div className="testimonial_content">
<a href={web}>
<img
src={web}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1>Nisha Sinha</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
It's a big thanks for helping me a lot in achieving my
goal of JRF. All the lectues were so helpful and i really
learned from basic to the top and my doubts got cleared
whenever needed and really all the faculties helped with
quality videos ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web1}>
<img
src={web1}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Pooja Dhayal</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
Dive to learn helped me to achieve my goals.I cleared UGC
NET exam in December ”
</ReactReadMoreReadLess>
</p>
</div>
</div>
<div className="carousel-item">
<div className="testimonial_content">
<a href={web2}>
<img
src={web2}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1 className="my-2">Parul</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
>
Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
learn faculties.your video
”
</ReactReadMoreReadLess>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default newComp
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Preventing duplicate objects being added to firebase back end

I have a question regarding preventing duplicates from being added to
cart while using firebase as back-end.
It should be straight forward but for some reason, nothing I try is working.
const { products } = this.props;
return (
<div>
{products === undefined ? (
<p>Loading......</p>
) : (
products.map(val => {
return (
<div key={val.id} className="row">
<div className="col-sm-6">
<div className="card-body">
<img src={val.url} className="img-fluid" alt="Responsive" />
<h5 className="card-title">{val.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">
{val.price}
</h6>
<button
className=" "
style={{
float: "right",
marginBottom: "1px",
width: "100%"
}}
onClick={() => this.submit(val)}
>
<i className="fas fa-cart-plus" />
</button>
</div>
</div>
</div>
);
})
)}
</div>
);