We Keep Coding

Function sent as props being called continuously - React.js

I am making a newsapp i want it to have different categories, instead of using react-router-dom for navigation what i want to do is create a state object and create a key in it named category and set current category as it's value and i have sent that key as a props to news component where i fetch news and embed that category to the fetch URL
I have made a function to set the category and its in app.js I have sent it to navbar component as props, the issue i am facing is that i can't select a category, because for some reason the onClick of the very last category is being called continuously and I know this because I console logged the category in setCategory function, can anyone tell me why this is happening
code in app.js:
import './App.css';
import React, { Component } from 'react'
import Navbar from './components/Navbar';
import News from './components/News';
export default class App extends Component {
constructor() {
super()
this.state = {
darkMode: "light",
country: "us",
category: "general",
key: "general"
}
}
setCategory = (cat)=> {
this.setState({
category: cat
})
console.log(this.state.category)
}
setCountry = (cntry)=> {
this.setState({
category: cntry
})
}
setDarkMode = () => {
if (this.state.darkMode === "light") {
this.setState({ darkMode: "dark" })
document.body.style.backgroundColor = "black"
} else {
this.setState({ darkMode: "light" })
document.body.style.backgroundColor = "white"
}
}
render() {
return (
<div>
<Navbar setCategory={this.setCategory} setCountry={this.setCountry} setDarkMode={this.setDarkMode} darkMode={this.state.darkMode} />
<News key={this.state.category} category={this.state.category} country={this.state.country} pageSize={18} darkMode={this.state.darkMode} />
</div>
)
}
}
code in Navbar component:
import React, { Component } from 'react'
export default class Navbar extends Component {
constructor(props) {
super(props)
this.setCategory = this.props.setCategory
}
render() {
return (
<div>
<nav className={`navbar navbar-expand-lg navbar-${this.props.darkMode} bg-${this.props.darkMode}`}>
<a className="navbar-brand" href="/">NewsMonkey</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="/about">About</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="/" role="button" data-toggle="dropdown" aria-expanded="false">
Categories
</a>
<div className="dropdown-menu">
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("business")}>Business</p>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("science")}>Science</p>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("technology")}>Technology</p>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("entertainment")}>Entertainment</p>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("health")}>Health</p>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("sports")}>Sports</p>
<div className="dropdown-divider"></div>
<p className="dropdown-item cursor-pointer" onClick={this.setCategory("general")}>General</p>
</div>
</li>
</ul>
{/* <form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> */}
<div className={`custom-control custom-switch text-${this.props.darkMode === "light" ? "dark" : "light"}`}>
<input type="checkbox" className="custom-control-input" onClick={this.props.setDarkMode} id="customSwitch1" />
<label className={`custom-control-label`} htmlFor="customSwitch1">Dark mode</label>
</div>
</div>
</nav>
</div>
)
}
}

This doesn't do what you think it does:
onClick={this.setCategory("business")}
This calls the setCategory function immediately and uses the result of that function as the onClick handler. Don't pass the result of calling a function to onClick, pass a function itself:
onClick={() => this.setCategory("business")}

How to put one whole class to the right ? / how to add padding in class? - confused ( React.js - Bootstrap)

So, I am a react js and bootstrap noob. Please help me by telling how can I achieve this desired change - Basically I want the Image ( which is seen on the right in the image below) to be put on the total right on my website, currently the text and image are a too close to each other. How can I do this? below the image is also my code for that webpage.
https://i.stack.imgur.com/6OoTa.png
import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";
const Common =(props) => {
return (
<>
<section id = "header" className = "d-flex align-items-between ">
<div className = "container-fluid">
<div className = 'row'>
<div className = "col-10" mx-auto>
<div className ="row">
<div className = "col-md-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
<h1>{props.name} <strong className = "brand-name"> Pinnacle Tutorials</strong>
</h1>
<h2 className = "my-3">
We are a team of talented Teachers here for your ward
</h2>
<div ClassName = "mt-3">
<NavLink to={props.visit} className = "btn btn-success">Get Started check - {props.btname}</NavLink>
</div>
</div>
<div className = "col-lg-6 order-6 order-lg-5 header-img d-flex justify-content-end">
<img src ={props.imgsrc} className = "img animated" alt = "home img "/>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default Common;
NAVBAR CODE :
import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<div className = "container-fullwidth nav_bg">
<div className = 'row'>
<div className = "col-12 mx-auto">
<nav className="navbar navbar-expand-lg navbar-light bg-light py-3 container-fluid">
<NavLink className="navbar-brand" to="/">Pinnacle Tutorials</NavLink>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto">
<li className="nav-item active">
<NavLink activeClassName ="menu_active" exact className="nav-link" to="/">Home <span className="sr-only">(current)</span></NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/about">About</NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/service">Services</NavLink>
</li>
<li className="nav-item">
<NavLink activeClassName ="menu_active" className="nav-link" to="/contact">Contact</NavLink>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</>
);
};
export default Navbar

So what's going on here is that you're creating two columns, each of equal width. If you want the column containing the image to place the image at the extreme end, I'd suggest doing it the flex way, i.e, giving the col containing the <img> a display of flex which can be given with the class d-flex, and then applying a justify-content: flex-end; to it, which can be done by adding the class name justify-content-end
At the end, your div should look something like this:
<div className = "col-lg-6 order-6 order-lg-5 pad-10 header-img d-flex justify-content-end">
<img src ={props.imgsrc} className = "img-fluid animated" alt = "home img "/>
</div>

p {
padding-right: 150px;
}
<div class="bg-light d-flex justify-content-between">
<div>Total Cost</div>
<div>$50</div>
</div>

Toogle active class on selected link react

I have a menu list that opens a mega menu when you hover on a larger screen and click on smaller screens.
Now when the mega menu opens, I want to be able to add a custom class e.g active class so I can style the mega menu for mobile.
However, when I click on the link, it adds the class or id for all links. I want to add a class or id for the clicked link.
import React, {useState} from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { FaArrowRight } from "react-icons/fa";
import Button from "react-bootstrap/Button";
import LogoTransparent from "../../images/logo/logo-reverse.png";
import LogoWhite from "../../images/logo/logo-white.png";
const TransparentNavbar = (props) => {
// check if the background is transparent to return corresponding logo.
let LogoType;
if (props.bgLogo === "transparent") {
LogoType = LogoTransparent;
} else {
LogoType = LogoWhite;
}
const [active, setActive] = useState(false)
return (
<Navbar
collapseOnSelect
expand={props.bgExpand}
bg={props.bgIntrinsic}
variant={props.bgVariant}
sticky={props.bgSticky}
fixed={props.bgFixed}
className={props.bgColor}
>
<Container>
<Navbar.Brand className="navbar-brand-margin" href="#home">
<img
src={LogoType}
className="d-inline-block align-top"
alt=""
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<Nav.Link id={active ? 'open' : ''} className={ props.bgtextColor + " " + props.bgExpandBtn} onClick={() => setActive(!active)} >
About Us
<div className="mega-menu">
<div className="content">
<div className="col first-col">
<section>
<ul className="mega-links expandable">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Company Overview</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Partners</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Mission, Vision & Core Values</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Management Team</li>
</a>
<a
href="/board-of-directors"
className="mega-menu-links-white-bg"
>
<li>Board of Directors</li>
</a>
</ul>
</section>
</div>
<div className="col second-col">
<section>
<div className="mega-menu-text">
<p>
We focus on delivering digital solutions to our
clients such that high value can be derived with a
huge ROI. We have experience and expertise in
providing such a digital transformation program to
alleviate clients' pain point and position such
clients for efficient and effective operation with a
high possibility of increasing their revenue and
profit at the same time.
</p>
<div className="mega-menu-button">
<Button
variant="outline-primary"
className="primary-mega-button shadow-none"
>
Read More
<FaArrowRight />
</Button>
</div>
</div>
</section>
</div>
<div className="col third-col">
<section>
<h5 className="mega-menu-image-header-text">
*** Limited is a leading Africa Technology
and Digital Consulting Firm
</h5>
<a href="#" className="img-wrapper">
<span className="img">
<img
className="w-100"
src="https://picsum.photos/400?random=1"
alt="Random Image"
/>
</span>
</a>
</section>
</div>
</div>
</div>
</Nav.Link>
{/* Solutions links */}
<Nav.Link id={active ? 'open' : ''} className={props.bgtextColor + " " + props.bgExpandBtn} onClick={() => setActive(!active)}>
Solutions
<div className="mega-menu">
<div className="content">
<div className="col first-col">
<section>
<ul className="mega-links expandable">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Digital Culture</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Identity & Access Management</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Cyber Security</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Management Team</li>
</a>
<a
href="/board-of-directors"
className="mega-menu-links-white-bg"
>
<li>DevOps Services</li>
</a>
</ul>
</section>
</div>
<div className="col second-col-link">
<section>
<ul className="mega-links second">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Managed IT Infrastructure</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Digital Transformation (DX)</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Technology Consulting & Advisory Service</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Cloud Computing (Microsoft, SAP) Team</li>
</a>
</ul>
</section>
</div>
<div className="col third-col">
<section>
<h5 className="mega-menu-image-header-text">
is a leading Africa Technology
and Digital Consulting Firm
</h5>
<a href="#" className="img-wrapper">
<span className="img">
<img
className="w-100"
src="https://picsum.photos/400?random=1"
alt="Random Image"
/>
</span>
</a>
</section>
</div>
</div>
</div>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default TransparentNavbar;
I kind of have an idea how it should work but I don't know how to implement it, probably give it a unique id to map through the whole mega menu or some sort. At this point, any help would be highly appreciated.

try using NavLink from "react-router-dom"
e.g
import {NavLink} from "react-router-dom"
<NavLink to="/about/company-overview" className="mega-menu-links-white-bg" >
Company Overview
</NavLink>
instead of::
<a href="/about/company-overview" className="mega-menu-links-white-bg" >
<li> Company Overview </li>
</a>

How to use JavaScript with $ inside render() in Reactjs

I work on content editor in React admin interface.
And I'd love to install my favorite block content editor. But it's an old one and have no react version.
I know how to link .js and .css in head with ReactHelmet
But have no idea how to run following script:
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
Here is initial html structure
<body>
<header>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</div>
</main>
</body>
Im using it like so:
import PageTitle from "../components/common/PageTitle";
import Helmet from "react-helmet";
import $ from 'jquery';
class NewsEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const {
} = this.state;
return (
<Container fluid className="main-content-container px-4">
{/* Page Header */}
<Row noGutters className="page-header py-4">
<PageTitle sm="4" title="News editor" subtitle="Drag and drop interface" className="text-sm-left" />
</Row>
<Helmet
title="Nested Title"
link={[
{"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.css"}
]}
script={[
{"src": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.js"},
]}
/>
<header>
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</main>
</Container>
);
}
}
export default NewsEditor;
On this stage all I have is Failed to compile error.
UPD: Following advices I keep on getting TypeErrors

I always make re-usable components for external libraries. So in your case, it would be BrickyEditor component which could look like this:
class BrickyEditor extends React.Component {
editorRef = React.createRef();
componentDidMount() {
window.$(this.editorRef.current).brickyeditor(this.props);
}
render() {
return <div ref={this.editorRef}></div>
}
}
// in your NewsEditor component you can use it like so
<BrickyEditor
ignoreHtml={true}
blocksUrl="data.json"
templatesUrl="templates.html"
onChange={function(data) {
console.log(data.html);
}}
/>

tag navbar does not work in Reactjs

I'm still new in javascript especially in reactjs. I have a problem when creating a web header. I want to put the menu on the right and I use . But it does not work, the menu stays on the left. I am using bulma for css. Can anyone help?
import React, { Component } from 'react';
import './Header.css';
import { Link } from 'react-router-dom';
class Header extends Component {
render() {
return (
<div className="nav has-shadow">
<div className="container">
<div className="nav-left">
<a className="nav-item">MyCompany</a>
</div>
<span className="nav-toggle" >
<span></span>
<span></span>
<span></span>
</span>
<div className="nav-right nav-menu">
<Link to="/" className="nav-item r-item">Home</Link>
<Link to="/faq" className="nav-item r-item">Features</Link>
<Link to="/faq" className="nav-item r-item">About</Link>
<Link to="/faq" className="nav-item r-item">faq</Link>
<div className="nav-item">
<p className="control">
<a className="button is-primary is-outlined">
<span className="icon">
<i className="fa fa-download"></i>
</span>
<span>Join Now</span>
</a>
</p>
</div>
</div>
</div>
</div>
);
}
}
export default Header;

Use navbar-end class to place your menu contents right side like
<nav class="navbar">
<div class="navbar-end">
<div class="navbar-item">
<!-- Your content here -->
</div>
</div>
</nav>
For documentation about header/navbar in Bulma CSS refer Navbar | Bulma