How can I create a new portal in react js? - javascript

I'm trying to create a new portal with an id .
This is the index html file in the public folder :
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="other"></div>
</body>
And here I tell react to render this component inside the div with the id of root :
import React from 'react';
import ReactDOM from 'react-dom';
function New() {
return ReactDOM.createPortal(<h1>DEMO</h1>, document.getElementById('other'));
}
export default New;
But when I npm start I dont see anything inside the div with the id of other .
How can I create a new portal in react js properly ?

I solved the problem by including the New component inside App.js file :
import React from 'react';
import logo from './logo.svg';
import './App.css';
import New from './New';
function App() {
return (
<div className="App">
<New />
</div>
);
}
export default App;
And when I inspect it , the New component is actually inside the div with the id of other .

Related

Calling a specific button from a react App.js file

I have a react app with two buttons ("+", "-") that are created by a single component. I am trying to use CountAPI to store the input data from the two buttons. So far i am able to get the input and update the countAPI site to interperate either plus or minus from the buttons. The problem i am having is seperating the two buttons. It works for both buttons but i havent been able to figure out how to call the specific "+" or "-" button. For example, in the code below, its set to increment by +1 when i press the button, but i can press either the "+" or "-" button and they both increment by +1.
index.js
import React from 'react';
import ReactDOM from 'react-
dom/client';
import './index.css';
import App from './App';
import reportWebVitals from
'./reportWebVitals';
import countapi from 'countapi-js';
import "./App.js";
const alb = ReactDOM.createRoot(document.getElementById('alb'));
alb.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
document.getElementById("alb").addEventListener("click", () => {
countapi.update('f1AppAlbon', 'fbda1857-916b-413d-8b7b-503651f3c52c', +1).then((result) => {
alert(`The magic button has been pressed ${result.value} times.`);
});
});
App.js
import React, { useState } from "react";
import Button from "./components/Button";
import "./App.css";
import "./index.js";
<div class="buttons">
<Button title={"-"} action={decrementCount} class="minus"></Button>
<Button title={"+"} action={incrementCount} class="plus"></Button>
</div>
index.html
<div id="+alb"></div>
Sorry if some terminology is wrong, im still new to this.

Rows, Cols, and Tables in React JS

I'm a React JS Beginner and I'm trying to create a table (or grid) by React Js. I've searched through different sites and tried different ways. I've used react-row, react-bootstrap, react-table, and followed the instructions step by step. However, none of them works. I tried to display a row with 3 cells but all of them displayed 3 rows :<<. Please, can you guys give me other ways or show me how to use the 3 mentioned libraries clearly. Thanks
Here is one of my case,
import React, {useState, useEffect, Component} from 'react';
import AppNavBar from './AppNavBar.js';
import {Container, Row, Col} from 'react-bootstrap';
const RestaurantReview = (props) => {
return(
<>
<AppNavBar />
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</>
)
}
export default RestaurantReview
If you have a stylesheet that you're referencing in this component you can add the below line at the top of it to ensure you pull in the default bootstrap styles.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");
Then you can import that stylesheet in your App.js component or into RestaurantReview.js whichever you prefer. Preferably in App.js that way you can use the bootstrap styles in other components.
App.js
import React from "react";
import RestaurantReview from "./components/RestarauntReview";
import "./styles.css"; // this is where you import the bootstrap styles
function App() {
return (
<div className="App">
<RestaurantReview />
</div>
);
}
export default App;
This way you won't have to change any of your code in RestaurantReview.js
Here is a codesandbox with all of the code.

How to import the folder as Vue component

I want to display different Vue component for the mobile device. And I found this solution (https://stackoverflow.com/a/48515205/11079653) via mixin.
And, for example, I have the component - Card.vue. But for the mobile device, I have created CardMovile.Vue.
Now I want to put these components in the folder Card which will contain index.js
-Card
--Card.vue
--CardMobile.vue
--index.js
After that, I just want import Card in my App.vue and index.js should decide what component needed (Card.vue or Card.mobile.vue)
<template>
<Card></Card>
</template>
<script>
import Card from './Card'
</script>
is it possible?
You could try to write the following in the Card/index.js file:
import isMobile from 'is-mobile'
import Card from './Card.vue'
import CardMobile from './CardMobile.vue'
export default isMobile() ? CardMobile : Card

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed
You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));

Module breaks when using a react component within a nested component

I am trying to render a simple nested React component called Navbar but when I use another component (or a Link tag in this case) within it, the console gives me 'Uncaught Error: Cannot find module "../Navbar"'. If I remove the Link tag, the h1 tag is shown and there are no errors. I can use the Link tag in the App component so I know it should work in the project.
My App.js code looks like this:
import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className='App'>
<Link to="about">About</Link>
<Navbar />
<RouteHandler />
</div>
);
}
});
My Navbar.js code looks like this:
import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';
export default React.createClass({
mixins: [PureRenderMixin],
render: function () {
return (
<h1>Navbar</h1>
<Link to="about">About</Link>
);
}
});
I'm using React-Router, Webpack, and Browser-Sync but besides nested components, routing, building, and syncing seem to be working fine.
Your render method in Navbar is trying to return two values at once, the <h1> and the <Link>. This is a syntax error. You need to wrap them in a single element, e.g. a <div>.
See also http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html

Categories