We Keep Coding

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>

Document query selector returns undefined in react

I am trying to build a toggle sidebar. when I click on the button the class list of .m-toggle should be updated. But react gives me an error
"TypeError: Cannot read property 'classList' of null"
Here is my code:
import React, { useState, useEffect } from 'react'
// import Sidebar from '../Components/Sidebar'
import AppleIcon from '#material-ui/icons/Apple'
import DashboardIcon from '#material-ui/icons/Dashboard'
import PeopleIcon from '#material-ui/icons/People'
import NotificationsIcon from '#material-ui/icons/Notifications'
import SettingsIcon from '#material-ui/icons/Settings'
import HelpIcon from '#material-ui/icons/Help'
import img from '../Assets/img/keval.jpg'
function toggleMenu() {
let toggle = document.querySelector('.m-toggle')
toggle.classList.toggle('m-active')
}
const Main = () => {
return (
<>
<div className="m-body">
<div className="m-container">
{/* -------Sidebar Start------- */}
<div className="m-navigation">
<ul style={{ padding: '0' }}>
<li>
<a href="#">
<span className="m-icon">
<AppleIcon className="muicon" />
</span>
<span className="m-title">
<h2>Brand Name</h2>
</span>
</a>
<hr style={{ color: 'white' }} />
</li>
<li>
<a href="#">
<span className="m-icon">
<DashboardIcon className="muicon" />
</span>
<span className="m-title">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<PeopleIcon className="muicon" />
</span>
<span className="m-title">Employees</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<NotificationsIcon className="muicon" />
</span>
<span className="m-title">Notification</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<HelpIcon className="muicon" />
</span>
<span className="m-title">Help</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<SettingsIcon className="muicon" />
</span>
<span className="m-title">Setting</span>
</a>
</li>
</ul>
</div>
{/* --------Side BAr End--------- */}
<div className="m-main">
<div className="m-topbar">
<div className="m-toggle" onClick={toggleMenu()}>
f
</div>
<div className="m-search">
<label>
<input type="text" placeholder="Search here" />
</label>
</div>
<div className="user">
<img src={img} alt="no img" />
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Main
You can see the code where onclick class list should be updated but it is not updating.

One problem I see is that you are not passing a function reference in onClick, but doing a function call instead:
<div className="m-toggle" onClick={toggleMenu()}>
Either remove the parentheses after toggleMenu:
<div className="m-toggle" onClick={toggleMenu}>
or pass it as an inline arrow function:
<div className="m-toggle" onClick={() => toggleMenu()}>

Several problems:
React onClick expects a function but you are invoking toggleMenu instead. It should be onClick={toggleMenu} or onClick={()=>toggleMenu()}
You should be managing the className using state instead of using document.querySelector() and modifying the element yourself.

You are calling the toggleMenu() method during component render which you shouldn't do.
So when your component tries to render, it calls toggleMenu method and returns null for m-toggle query selector. you can either bind function reference or use arrow function.
<div className="m-toggle" onClick={toggleMenu}>
OR
<div className="m-toggle" onClick={() => toggleMenu()}>

If found error !! Element type is invalid: expected a string

I have error on my react js projects, i've searched in google but all did not give me the solution
I got error like this :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Look my code :
ArticleAll.js
import React from 'react';
import Navigation from '../partials/Navigation';
import ArticleCard from './ArticleCard';
import Footer from '../partials/Footer';
class ArticleAll extends React.Component {
render() {
return (
<div class="page-wrapper">
<div id="control-body" class="fixed-sidebar medium-sidebar fixed-nav">
<Navigation/>
<main class="page-body">
<div class="row">
<div class="col s12 page-title-div">
<h1 class="header">Cards</h1>
<ol class="breadcrumbs left">
<li>Dashboard</li>
<li>Advanced UI</li>
<li class="active">Cards</li>
</ol>
<a class='dropdown-button dropdown-hover waves-effect waves-light page-help right' href='javascript:void(0)' data-activates='dropdown-help'>
<i class="material-icons">help</i>
</a>
<ul id='dropdown-help' class='dropdown-content'>
<li>API</li>
<li>Blog</li>
<li>Docs</li>
</ul>
</div>
</div>
<section class="section">
<div class="row ">
<ArticleCard/>
</div>
</section>
</main>
<Footer/>
</div>
</div>
)
}
}
export default ArticleAll;
ArticleCard.js
import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;
Routes.js
import React from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import Home from '../components/Home';
import Login from '../components/auth/Login';
import Register from '../components/auth/Register';
import ArticleAll from '../components/article/ArticleAll';
class Routes extends React.Component {
render() {
return (
<BrowserRouter>
<div>
{this.props.children}
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/article" component={ArticleAll}/>
</div>
</BrowserRouter>
)
}
}
export default Routes;
Navigation.js
import React from 'react';
import ReactDOM from 'react-dom';
class Navigation extends React.Component {
render() {
return (
<div>
<nav class="page-header z-depth-3">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo hide-on-med-and-down">materialcss</a>
<ul class="left">
<li class="hide-on-large-only">
<a href="javascript:void(0)" id="toggle-left-sidebar" class="hrz-menu waves-effect waves-default">
<i class="material-icons">menu</i>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="javascript:void(0)" class="hrz-menu waves-effect waves-default hide-show-nav-search">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin waves-effect waves-default" data-activates="notification-list-dropdown">
<i class="material-icons">notifications</i>
<span id="notification-cout">25</span>
</a>
</li>
<li id="user-account-box">
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin dropdown-widthChange waves-effect waves-default" data-activates="user-account-dropdown">
<i class="material-icons">account_circle</i>
</a>
</li>
</ul>
<ul id="notification-list-dropdown" class="width-400 dropdown-content">
<li>
<a href="#!">
<i class="material-icons">email</i>
</a>
<p class="noti-message">
<a href="#!">New mail from jhon
<span>15 minutes ago</span>
</a>
</p>
</li>
<li>
See All
</li>
</ul>
<ul id="user-account-dropdown" class="dropdown-content">
<li>
<a href="#!">
<i class="material-icons">perm_identity</i>My Profile
</a>
</li>
<li>
<a href="javascript:void(0)" class="toggle-right-sidebar">
<i class="material-icons">settings</i>Page Customizer
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<i class="material-icons">lock</i>Lock
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">power_settings_new</i>Logout
</a>
</li>
</ul>
<div class="search-overlay hide"></div>
<div id="search-body" class="z-depth-1">
<form class="search-box">
<div class="input-field z-depth-1">
<input id="search" type="search" autocomplete="off" required="required" />
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons hide-show-nav-search">close</i>
</div>
</form>
</div>
</div>
</nav>
<aside>
<div class="left-sidebar-overlay"></div>
<div class="left-sidebar z-depth-3">
<div class="md-logo-container hide-on-large-only theme-bg">
<a class="md-brand-logo white-text" href="#">WhoamiHub</a>
</div>
<div class="left-sidebar-body">
<div class="current-subscription">
<table>
<tbody>
<tr>
<td class="center">
<span class="current-plan">Business</span>
<span class="price">$49/month</span>
</td>
<td class="center">
UPGRADE
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<ul class="leftside-navigation">
<li class="navigation">Menu</li>
<li>
<a href="dashboard.html" class="menu waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Dashboard">
<i class="material-icons left-icon">dashboard</i>Dashboard
</a>
</li>
<li>
<a href="javascript:void(0)" class="collapsible-label1 waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Material UI">
<i class="material-icons left-icon">build</i>
<i class="material-icons right-icon">arrow_drop_down</i>Material UI
</a>
<ul class="collapsible-body">
<li>
Buttons
</li>
<li>
Breadcrumbs
</li>
<li>
Collections
</li>
<li>
Collapsibles
</li>
<li>
Dropdown
</li>
<li>
Tabs
</li>
<li>
Pagination
</li>
<li>
Preloader
</li>
<li>
Toasts
</li>
<li>
Tooltip
</li>
<li>
Waves
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="javascript:void(0)" id="collapsed-left-sidebar" class="toggle-icon-left-sidebar waves-effect waves-default">
<i class="right material-icons">keyboard_arrow_left</i>
</a>
</div>
</div>
</aside>
</div>
)
}
}
export default Navigation;
Footer.js
import React from 'react';
class Footer extends React.Component {
render() {
return (
<div>
<footer class="page-footer">
<div class="footer-copyright">
<div class="left">© materialcss</div>
<div class="right"><i class="material-icons">arrow_upward</i></div>
</div>
</footer>
</div>
)
}
}
export default Footer;

return (
<div>
<footer class="page-footer">
class is a reserved JS keyword. You must use className instead --
<footer className="page-footer" />

import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div className="col s12 m6">
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;

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

navbar from Bootstrap to reactjs

I have programmed a navbar using Bootstrap and react. In order to obtain the functionality of bootstrap must be installed and bootstrap.js jquery.js. I just want to basically use the CSS file of bootstrap and the functionality of reactjs. Does it make sense to use Bootstrap with reactjs?
I need to realize with reactjs a little help to program the navigation.
Here the source of my header. I need help to programm the navbar in reactjs without bootstrap.js and jquery.min.js
import React from "react"
export class Header extends React.Component {
render() {
return (
<nav className="navbar-kwp-header navbar-default navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar">
<span className="sr-only">Navigation ein- / ausblenden</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#"><img src="images/logo.jpg" alt="" /></a>
</div>
<div id="Navbar" className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li>Home</li>
<li className="dropdown"><a className="dropdown" data-toggle="dropdown" role="button" aria-expanded="false">Service <span className="caret"></span></a>
<ul className="dropdown-menu" role="menu">
<li>Downloads</li>
<li>Glossar</li>
<li>Newsletter</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
}
}

You can manually code a state variable to handle the toggling of the navbar:
class App extends Component {
state = {
navCollapsed: true
}
_onToggleNav = () => {
this.setState({ navCollapsed: !this.state.navCollapsed })
}
render () {
const {navCollapsed} = this.state
return (
<nav className='navbar navbar-default'>
<div className='navbar-header'>
<a className='navbar-brand' href='/'>Your Brand</a>
<button
aria-expanded='false'
className='navbar-toggle collapsed'
onClick={this._onToggleNav}
type='button'
>
<span className='sr-only'>Toggle navigation</span>
<span className='icon-bar'></span>
<span className='icon-bar'></span>
<span className='icon-bar'></span>
</button>
</div>
<div
className={(navCollapsed ? 'collapse' : '') + ' navbar-collapse'}
>
<ul className='nav navbar-nav navbar-right'>
<li>
<a>About</a>
</li>
</ul>
</div>
</nav>
)
}
}

You can easily use bootstrap in your react components by using react-bootstrap package.
https://react-bootstrap.github.io/
This is an example with navbar which you want to use.
import React from "react"
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
export class Header extends React.Component {
render() {
return (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
);
}
}