Move the header with the window with react - javascript

I would like to move the whole window with its contents when I hold the mouse on the header. However, the window cannot be moved if the content is held on the click. My goal is to do something similar to a window on Windows or MacOs.
In the end the window could be moved anywhere on the screen.
Right now, when I hold the header, I see that it wants to move but the window does not.
Translated with www.DeepL.com/Translator (free version)
//header file
import React from 'react';
import ChangeClassClose from './buttonHeader/closebutton';
import ChangeClassBig from './buttonHeader/bigButton';
import ChangeClassMin from './buttonHeader/minButton';
class HeaderType extends React.Component {
render() {
return (
<>
<div className="window-header" draggable="true" onDragStart ={this.handleDragStart} onDragEnd ={this.handleDragEnd}>
<div className="TestContent">
<div className="close" id="close" title="close" onClick={ChangeClassClose}>
</div>
<div className="hide" id="min" title="diminuer" onClick={ChangeClassMin}>
</div>
<div className="open" id="big" title="agrandir" onClick={ChangeClassBig}>
</div>
<div>
</div>
</div>
<div className="test_2">
</div>
</div>
</>
)
}
}
export default HeaderType;
// app file (with window)
import React from 'react';
import HeaderType from './header';
import ColumnLeft from './column_left';
import ColumnRight from './column_right';
import { BrowserRouter, Link } from 'react-router-dom';
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div className="window" id="window" onDragOver={this.handleDragOver} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave}>
<div className="window-body" id="window-body">
<HeaderType />
<div className='window_inner'>
<ColumnLeft />
<ColumnRight />
</div>
</div>
</div>
<div className="addWindowBody" id="openWindow">
<a href ='/'>
<div className="addWindow">
<i class="material-symbols-outlined">
open_in_full
</i>
</div>
</a>
</div>
<div className="addDarkMode" />
</BrowserRouter>
);
}
}
export default App;

Related

React icons display

My imported React icons on my personal website are not displaying at all. I tried reinstalling React Icons with and without --save. I checked node_modules and package.json. Everything seems to be in order, but it still doesn't work.
Here is my code from HeaderSocials.jsx:
import React from 'react'
import { BsLinkedin } from 'react-icons/bs'
import { BsGithub } from 'react-icons/bs'
const HeaderSocials = () => {
return (
<div className='header__socials'>
<BsLinkedin/>
<BsGithub/>
aa
</div>
)
}
export default HeaderSocials
And Header.jsx:
import React from 'react'
import './header.css'
import CTA from './CTA'
import SKANDER from '../../assets/SKANDER.jpg'
import HeaderSocials from './HeaderSocials'
const Header = () => {
return (
<div>
<header>
<div className="container header__container">
<h5>Hello I'm</h5>
<h1>Skander JEDDA</h1>
<h5 className="text-light">Fullstack JS Developer</h5>
<CTA />
<HeaderSocials />
<div className="me">
<img src={SKANDER} alt="me" />
</div>
<a href="#contact" className='scroll__down'>Scroll Down</a>
</div>
</header>
</div>
)
}
export default Header
I tried reinstalling the library and checking Stack Overflow, and I even asked ChatGPT, but still to no avail.
Try removing the className 'header__socials' and then if you want to style your icons here is an example link

React map adding background color special elements

I use map but I have one problem I am trying to set the background of a certain element inside the map, in my case it is "item .title" I want my element to look like this https://ibb.co/ccJzD6g as you can see in the picture background color " 100% "which I specifically set in the console for but in fact if I set" background: orange "for the sidebar_list class, then the color will be applied to all elements including the rest , https://ibb.co/ZBTX3hd and if I set the background for the titleName class it looks like this https://ibb.co/84RKBBw but I want it to look like this https://ibb.co/ccJzD6g how do i solve this problem?
Lesson.jsx
import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
export class Lessons extends React.Component {
constructor(props) {
super(props);
this.state = {
indexDescription: 0,
}
}
render() {
const listLessons = this.props.lesson.map((item, index) => {
return (
<li key={index} className={less.sidebar_list} onClick={() => {
this.setState({ indexDescription: index })
}}>
<div>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div style={{background: "orange"}} className={less.titleName}>
<p>{item.title}</p>
</div>
<div className={less.titleName}>
<p>{item.titleName}</p>
</div>
</li>
);
});
return (
<>
<div className="abc">
<Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex"
navbarSearchPage="Search" navbarHomePage="Home" centerHeadlineNavbarColumn="center" />
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div>
<ul>
{listLessons}
</ul>
</div>
</div>
</div>
<div className={less.main_content}>
<div className={less.main_inside_content}>
<div className={less.header}>
<div>
<h2>JavaScript JSON Reference</h2>
</div>
</div>
<div className={less.info}>
<div className={less.description}>
<p>
{
this.props.lesson[this.state.indexDescription]["description"]
}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}
First question answer: Create a new component with its own attributes separately and map/passdown the properties to the component.
Here's an example: https://codesandbox.io/s/objective-hopper-2st8g?file=/src/Lesson.js

React Component not displaying different text / information despite being given unique objects as passed props

I am currently creating a progressive web app with React, HTML, JS, and CSS for learning purposes and have run into an issue where my ExercisePanel components are displaying the exact same information despite being given 2 different objects to pull information from. The ExercisePanel is a stylized button that displays an image and the name of the exercise, and it accurately updates with the different objects. The problem stems from my custom Modal that I made to display the information, as it always displays the information of the first component listed in the App.js file. I have also cut down on some of the Strings for the sake of readability. The files below are what I believe are causing the problem, however I have been unable to figure out the cause. I apologize if the code is messy, I am a beginner with these tools. (Order is App.js then ExercisePanel.js then Modal.jsx)
// Import React and Component
import React, { Component } from 'react';
// Import CSS from App.css
import './App.css';
import Exercise from './js/classes/Exercise.js';
// Import the Today component to be used below
import ExercisePanel from './Components/ExercisePanel.js'
class App extends Component {
render() {
var test = new Exercise("Curl Ups", "10-30", "30 - 90", "A curl up (or sit up) ...", "Medium", "https://img.icons8.com/ios-glyphs/96/000000/sit-ups.png");
var test2 = new Exercise("TEST2", "ur", "2", "sda", "sad", "");
return (
<div className="">
<div className="topheader">
<header className="container">
<nav className="navbar">
<div className="navbar-brand">
<span className="navbar-item"><font class="topheader">Let's Move!</font></span>
</div>
</nav>
</header>
</div>
<section className="results--section">
<div className="container">
<h1>Let's Move is a Website ...</h1>
</div>
<div className="results--section__inner">
<ExercisePanel exercise={test}/>
<ExercisePanel exercise={test2}/>
</div>
</section>
</div>
);
}
}
export default App;
import React from 'react';
import ExerciseButton from './ExerciseButton';
import Modal from './Modal'
let ExercisePanel = (props) => {
return (
<div>
<ExerciseButton image={props.exercise.image} id={props.exercise.name} onClick={handleClick}>{props.exercise.name}</ExerciseButton>
<Modal desc={props.exercise.desc} clickEvent={handleClick} cal={props.exercise.calories} time={props.exercise.estTime} name={props.exercise.name} diff={props.exercise.difficulty}/>
</div>
);
}
function handleClick() {
document.querySelector('.modal').classList.toggle('modal--hidden');
}
export default ExercisePanel;
import React from 'react';
import "./ModalStyle.css"
var Modal = ({name, desc, cal, time, diff, clickEvent}) => {
return (
<div className="modal modal--hidden">
<div style={{backgroundColor: "#beb", padding: "2rem 4rem", maxWidth: "50%", borderRadius: "10px"}}>
<div className="close-button">
<button style={{border: "none", background: "none", cursor: "pointer"}} onClick={clickEvent}>X</button>
</div>
<div className="modal--header">
<span style={{fontWeight: "bold"}}>{name}</span>
</div>
<p>
{desc}
</p>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/ios-filled/50/000000/fire-element.png" alt="calorieImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Calories: " + cal}</span>
</div>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/pastel-glyph/50/000000/clock.png" alt="clockImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Recommended Time: " + time}</span>
</div>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/android/40/000000/flex-biceps.png" alt="difficultyImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Difficulty: " + diff}</span>
</div>
<div className="modal--infotext">
<span>*Values given by estimated calories were from a moderately intense workout for a healthy individual.</span>
</div>
</div>
</div>
);
}
export default Modal;
I suspect it is because when you click the button it executes document.querySelector('.modal').classList.toggle('modal--hidden'); which toggles the modal--hidden class on all modals, so no matter which button you click both modals are opened and you only see the one that is on top.
You probably want to add an open prop to your Modal component and use that prop to conditionally add the modal--hidden class to the root modal div.

Conditionally rendering component on button click (React)

I have created a basic React project that is pulling data from a SQL server. I would like this to be able to be rendered conditionally depending on what button has been clicked.
This is my Display Users Component which is used within my AdminViewUsers component (What is actually displaying the users).
import React, { Component } from 'react';
import './customers.css';
class DisplayUsers extends React.Component{
constructor(){
super();
this.state= { users: [] }
}
componentDidMount(){
this.setState({
users: this.getItems()
})
}
getItems(){
fetch('/admin-view-users')
.then(recordset => recordset.json())
.then(results => { console.log(results.recordset); this.setState({'users': results.recordset}); });
}
render () {
console.log(this.state.users)
return (
<ul>
{this.state.users && this.state.users.map(function(user, index){
//if (user.severity === 1){
return(
<div className ="jumbotron">
<li>
Severity: {user.severity}
</li>
<li>
<p>User Name:{user.name} </p>
</li>
<li>
User Email: {user.email}
</li>
<li>
Description of Issue: {user.description}
</li>
<button>See Details</button>
</div>
)
})
}
</ul>
);
}
}
export default DisplayUsers;
This is my AdminViewUsers Component
import logo from '../codestone logo.png';
import {Link } from 'react-router-dom'
import '../bootstrap.min.css'
import '../bootstrap.min.css'
import '../App.css'
import Customers from "../Components/customers";
import DisplayUsers from "../Components/DisplayUsers";
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, DropDownButton } from 'reactstrap';
function Home() {
return (
<div>
<Header/>
<SeveritySelector/>
<DisplayUsers/>
</div>
);
}
function Header(){
return (
<div class="jumbotron">
<div className = "User-Menu">
<Link>User details </Link>
</div>
<img className='profile-image' alt='icon' src={logo} width="340" height="60"/>
<Navigation/>
</div>
)
}
function Navigation (){
return(
<div>
<br/>
<div class="btn-group">
<Link to= '/home'><button type="button" class="btn btn-light">Home</button></Link>
<Link to= '/admin-view-users'><button type="button" class="btn btn-light">View Users(Admin)</button></Link>
</div>
</div>
)
}
function SeveritySelector (){
return(
<div className = "Severity-Toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Severity High</button>
<button type="button" class="btn btn-secondary">Severity Medium</button>
<button type="button" class="btn btn-secondary">Completed</button>
<button type="button" class="btn btn-secondary">View All</button>
</div>
</div>
</div>
)
}
export default Home;
Essentially I would like to use the function Severity Selector to be the decider of how the statement is displayed.E.g If the high severity button is selected then it will display all with a high severity (1) if medium selected all with medium severity (2) and completed to have a severity of 3. Finally a button to display all.
What in your opinion is the best way to do this? I understand I could use multiple statements within my "server.js" and load different queries and have them connected to different pages.
But is there a way that I could just use a if statement or something similar to determine what button is selected to avoid multiple transactions with the server? You can see a brief attempt I had within the display users with an if statement which worked but just was not dependent on the buttons.
Conditional render can be achieved using various techniques, the most used is the bracket style variant. It can be used in the following way:
function Header(){
const showFirst = true;
return (
<div class="jumbotron">
{showFirst && <MyFirstComponent />}
{!showFirst && <MySecondComponent />}
</div>
)
}
This will render the <MyFirstComponent /> if showFirst is true and will show <MySecondComponent /> if it is false.

React - How to resolve: "JSX expression must have parent and expression expected" error in vs code

I have a simple App.js file which is rendering fine in the browser but I am getting some problems or errors in the VS code editor.
I am getting these errors -
My App.js:
import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";
class App extends Component {
constructor(props) {
super(props);
}
render() {
let panelLeftCss = css.panel;
panelLeftCss += " " + css.leftPanel;
let panelRightCss = css.panel;
panelRightCss += " " + css.rightPanel;
return (
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
);
}
}
export default App;
I have tried to add a <React.Fragment> also but it's not resolving the errors in the VS code editor.
Is there any tool that I can use which solves this automatically, like prettier etc?
Please guide me.
Prettier or any other code formatting tools won't help you if you do not enclose your div with tags properly.
You forgot your closing </div> tag at the end of your code.
Also you have an extra </div> tag near your <TimeLineChart> there.
Check the formatted codes here as below. It should work.
You just need to be more careful in placing the tags.
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
</div>
Check your file extension its .ts
It must be .tsx(if you're using TypeScript)
Same for App.js change it to App.jsx (if you're using JavaScript)
then,
try this,
all your code must be in single parent tag, like i did inside <div>
as when render method returns only single parent, so you must careful while writing elements having only one parent or you wrap your code inside parent <div>
import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";
class App extends Component {
constructor(props) {
super(props);
}
render() {
let panelLeftCss = css.panel;
panelLeftCss += " " + css.leftPanel;
let panelRightCss = css.panel;
panelRightCss += " " + css.rightPanel;
return (
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
</div>
);
}
}
export default App;

Categories