Develop Reference

In React; is it possible to pass down a component name to create a flexible page switch component?

thanks for checking out my question. I'm wondering if what I am trying to do is possible, and why it doesn't work the way I am trying.
I have a toggle switch that allows you to change between pages simply. I'm wondering if I can make this toggle recyclable by being able to pass the component names down. Please see my attempt below.
Parent Component calling the Switch page toggler:
import React from "react";
import SwitchPages from "../component/SwitchPages/SwitchPages";
import StickyNoteComponent from "../component/StickyNote/StickyNoteComponent";
const HomePage = () => {
return (
<div className="page">
<SwitchPages
page1={"WeatherDisplayComponent"}
page2={"JokeComponent"}
text1={"Weather"}
text2={"Jokes"}
/>
<StickyNoteComponent />
</div>
);
};
export default HomePage;
The SwitchPage component that contains the toggle:
import React, { useState } from "react";
import Switch from "react-switch";
import JokeComponent from "../DailyJoke/JokeComponent";
import WeatherDisplayComponent from "../WeatherDisplay/WeatherDisplayComponent";
const SwitchPages=({page1,page2,text1,text2}) =>{
const [checked, setChecked] = useState(false);
return (
<div className="component">
<div className="switch">
<h1>{text1}</h1>
<Switch
offColor="#9BCA31"
onColor="#E3E545"
uncheckedIcon={false}
checkedIcon={false}
className="switch-toggle"
checked={checked}
onChange={() => {
setChecked(!checked);
}}
/>
<h1>{text2}</h1>
</div>
{checked === false ? <{page1} /> : <{page2} />}
</div>
);
}
export default SwitchPages;

How do I make my ReactJs app display A different message when In different screens?

I have to clone a website using ReactJs which only works on desktop. When it is viewed in a mobile view or Tablet...it shows "SITE NOT AVAILABLE ON MOBILE". I want to do that too....but it is not working on my site
import "./App.css";
import Navbar from "./components/Navbar";
import Text from "./components/Text";
import Slider from "./components/Slider";
import Wallet from "./components/Wallet";
import Dropdown from "./components/Dropdown";
import MobileTablet from "./components/MobileTablet";
import { BrowserView, MobileView } from "react-device-detect";
import { BrowserRouter as Router } from "react-router-dom";
function App() {
return (
<>
<BrowserView>
<Router>
<Text />
<div className="box">
<Navbar />
<Dropdown />
<div className="box2">
<Slider />
</div>
</div>
<div className="box3">
<Wallet />
</div>
</Router>
</BrowserView>
<MobileView>
<MobileTablet />
</MobileView>
</>
);
}
export default App;
This is the code for App.js the main part....Can someone help me make my app responsive...since i am very new to this.
If you need any other codes pls let me know

you can use isMobile for conditional rendering
import {isMobile} from 'react-device-detect';
...
if (isMobile) {
return <MobileTablet />
}
``

Look, you can use a State to monitor the viewport of client window, then a useEffect to change it. The property window.innerWidth gives you the width of the client, and then you can specify it to work only under specific conditions:
import { useState, useEffect } from "react";
export default function App() {
const [userIsDesktop, setUserIsDesktop] = useState(true);
useEffect(() => {
window.innerWidth > 1280 ? setUserIsDesktop(true) : setUserIsDesktop(false);
}, [userIsDesktop]);
return (
<div className="App">
{userIsDesktop ? <h1>i'm a desktop</h1> : <h1>i'm a mobile</h1>}
</div>
);
}

React - URL gets updated but the page is not rendered

I am following along a beginner's course on React. The Nav. Bar has two options - About, HomePage. On clicking on the bar, the url gets updated but the page remains the same and nav stays. I get no error.
App.js
import React from 'react';
import HomePage from './HomePage';
import About from './About';
import Header from './common/Header';
function App() {
function getPage() {
const route = window.location.pathname;
if (route === "about") return <About />;
console.log("hi");
return <HomePage />;
}
return(
<div className="container-fluid">
<Header>
{ getPage() }
</Header>
</div>
);
}
export default App;
Header.js
import React from 'react';
//to navigate across the website
function Header(){
return (
<nav>
Home | About
</nav>
);
}
export default Header;
index.js
import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import {render} from "react-dom";
import App from "./components/App";
render(<App />, document.getElementById("root"));
About.js
import React from 'react';
class About extends React.Component{
render (){
return(
<>
<h1> About </h1>
<p> This is the About Page </p>
</>
);
}
}
export default About;
HomePage.js
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
function HomePage(){
return(
<div className="jumbotron">
<h1>
Welcome
</h1>
<p>
This is my first React Project
</p>
</div>
);
}
export default HomePage;
There is no change in the page, only the URL gets updated.
I have tried many solutions on SO but none worked so far.

I'm guessing it always displays the <HomePage /> component?
That's because window.location.pathname returns a path with a leading slash. So route === "about" will always be false. You need to check route === "/about" instead.

In getPage function condition is wrong it's not about it's will be /about
Just change condition in if statement
like this
if (route === "/about") return <About />;

How do I change the innerHTML of an element using React?

I want to change innerHTML of a div, when I click on the button. I don't know why, but instead of getting an error, or getting the expected result it deletes to content and replacing it with "[object Object]".
How can I get it work?
import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
function LoginOnClick(){
document.getElementById("wrapper").innerHTML = <SignIn />;
}
return (
<div className="container" id="wrapper">
<button onClick={LoginOnClick}>Login</button>
<Login />
</div>
);
}
export default App;

You can make use of Hooks (Added n React 16.8).
import React, {useState} from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
const [signIn, setSignIn] = useState(false);
return (
<div className="container" id="wrapper">
{signIn ? <SignIn /> : <> //This is React Fragments syntax
<button onClick={() => setSignIn(true)}>Login</button>
<Login />
</>
}
</div>
);
}
export default App;

With react you don’t have to set the innerHtml to do this, instead the more typical way is to have internal state in your component and conditionally render your SignIn component based off that. To use state the component either needs to be class or use hooks, classes are more traditional so I changed the component to be a class.
To make a class a react component you need to extend the class with the React.Component, this is because react components have lots of internal behaviours that you need to include with your class for it to be considered a component.
So
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signIn: false,
};
this.LoginOnClick = () => {
this.setState({ signIn: true });
};
}
render() {
if (this.state.signIn) {
return (
<div className="container">
<SignIn />
</div>
);
}
return (
<div className=“container”>
<button onClick={this.LoginOnClick}>Login</button>
<Login />
</div>
);
}
}

Here is a simple way to do it:
import {useState} from "react";
const App = () => {
const [txt, setTxt] = useState("");
setTxt(<p> 'Lorem ipsum dummy text blabla.' </p>);
return(
<div>
{txt}
</div>
)
}
export default App;

React componet should be written as a pure function

Here is my ReactJs component code:
import React from 'react';
class App extends React.Component {
render() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
}
export default App;
Linting is showing me the following error:
error Component should be written as a pure function react/prefer-stateless-function
How to write that as a pure function to avoid this error ?

Like this:
import React from 'react';
const App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Components that do not need to keep state are called "stateless", and are usually considered best practice to use unless you need to keep state.

A simple function will suffice, you don't need an entire class (that should be only used for stateful components). You can reduce the code to
import React from 'react';
export default const App = () => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
or
import React from 'react';
export default function App() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}

Write it like this:
import React from 'react';
var App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Reason is: You are not using an state or any lifecycle method in this, so you can make it as Pure Function. It is basically know as Stateless Functional Component.
Check the doc for more details.

import React from 'react';
const App = (props) => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
export default App;