this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
Related
In my components/ folder I have created two components:
using function-based components:
import React from 'react';
const greet = () => <div className="App"><h3>Hello Sukarna Jana</h3></div>;
export default greet;
using class-based-components:
import React,{Component} from 'react';
class welcome extends Component{
render(){
return <div className="App"><h3>Hi, its Class Components</h3></div>;
}
}
export default welcome;
but when I am trying to import that in App.js it's not running:
import './App.css';
import React from 'react';
import greet from './components/greet';
import welcome from './components/welcome';
/*
* dont know why greet and welcome tags are not working
*/
function App() {
return (
<div className="App">
<greet/>
<welcome/>
<h1>Hello Sukarna Jana</h1><hr/>
</div>
);
}
export default App;
I just reviewed the code and could find the issues easily,
You didn't keep the naming rules in your code.
<greet/> replace to <Greet/>
<welcome/> replace to <Welcome>
Also, you should change the name of the component.
welcome.js
import React, { Component } from 'react'
class welcome extends Component
{
render()
{
return <h1>Class Component</h1>
}
}
export default welcome
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
return (
<div className="App">
<Greet />
<welcome />
</div>
);
}
export default App;
So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help
You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
return (
<div className="App">
<Greet />
<Welcome />
</div>
);
}
export default App;
It's also a good idea to name your files with components with capital letters, to make them easy to identify.
You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :
import Welcome from './components/Welcome'
then do
<Welcome/>
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.
React fails to some weird error when importing another component. If I remove ChristmasMap references in App.js then app works fine. But I want to import the ChristmasMap. Any help?
App.js
import React, { Component } from 'react';
import './ChristmasMap';
class App extends Component {
render() {
return (
<div>
<p>asd</p>
<ChristmasMap />
</div>
);
}
}
export default App;
ChristmasMap.js
import React, { Component } from 'react';
class ChristmasMap extends Component {
render(){
return (
<div>
component
</div>
);
}
};
export default ChristmasMap;
And the error I'm getting is App.js:56 Uncaught ReferenceError: ChristmasMap is not defined(…)
You should do:
import ChristmasMap from './ChristmasMap'
Sorry, i am new in React.
I have 2 components in my react application. Here is the parent:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Searchbar';
const App =() => {
return (
<div className="App">
<div className="App-header">
<Searchbar></Searchbar>
<h2>Welcome to React</h2>
</div>
</div>
);
}
export default App;
and here is the searchbar component:
import React,{Component} from 'react';
export default class Searchbar extends Component{
render(){
return <div>Here is search bar</div>;
}
}
Unfortunately, when the page loads it complains with the error:
Uncaught ReferenceError: Searchbar is not defined
It seems that, it does not recognize the Searchbar component.
What is the problem?
The solution is really simple. You are importing the searchbar wrongly in your file. You need to import it like import Searchbar from './Searchbar'; , since you have exported it as default you also need to import it in default manner.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Searchbar from './Searchbar';
const App =() => {
return (
<div className="App">
<div className="App-header">
<Searchbar></Searchbar>
<h2>Welcome to React</h2>
</div>
</div>
);
}
export default App;