Community, I rendered more than one component from a single page and the problem I receive is:
[./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'.]
Can anybody tell me why?
App.js
import "./App.css";
import { Home, Page, Greeting } from "./components/Home";
function App() {
return (
<div className="App">
<Home />
<Page />
<Greeting />
</div>
);
}
export default App;
Home.js
import React, { Component } from "react";
import React from "react";
class Home extends Component {
render() {
return (
<div className="box">
<h1>Its a box man!</h1>
</div>
);
}
}
class Page extends Component {
render() {
return (
<div className="box">
<h1>Its a second box man! from the other Component</h1>
</div>
);
}
}
const Greeting = () => {
return <h1>Hello again</h1>;
};
export { Home, Page, Greeting };
*The aim to practice two components from the same page, rather than just separating them.
Try to export all components one by one in Home.js like this:
export class Home...
export class Page...
export const Greeting...
And after that delete this line:
export { Home, Page, Greeting };
Change
const Greeting = () => {
return <h1>Hello again</h1>;
};
to
export const Greeting = () => {
return <h1>Hello again</h1>;
};
and your issue should be resolved
Try this in Home.js. If you export module as default, you can import without parenthesis {}. But if you export without default, you have to import using parenthesis.
export default { Home, Page, Greeting };
I tested your code and there was no problems except if these are not typos:
you haven't imported react in your App.js
you've imported react twice in your Home.js
The only problem I can think of is that you have forgotten to save Home.js.
If you've saved Home.js:
exit you're dev server using ctrl + c and start it again and see if the problem is resolved.
try removing Greeting Component and let us know if you still get errors.
Related
I'm stuck with React what's a new programming environment for me. So probably I use wrong names for certain objects.
I want to call a method in a class in file 'App.jsx' from a component in file 'Navbar.jsx'. This is (part of) my code so far:
App.jsx:
import React, {} from "react";
import { Navbar, Home, Footer, Documentation } from "./components";
class App extends React.Component {
constructor(props)
{
super(props);
this.state = { mainComponent: 'Home' };
}
getClick = () => {
console.log('test');
}
render() {
return (
<div className="min-h-screen gradient-bg-welcome">
<Navbar getClick={this.getClick}/>
<Home/>
<Footer/>
</div>
);
}
}
export default App;
Navbar.jxs:
...
const Navbar = () => {
...
return (
...
<div ... onclick={() => (call getClick in App.jsx here)}>
...
</div>
);
}
export default Navbar;
I searched the internet and tried some code from several examples, but I probably miss something simple. I can't figure out how to call getClick from Navbar.jsx.
I also tried using states, which should be a better option from what I read, but that also didn't work out for me.
My goal:
In App.jsx I have this:
<Navbar/>
<Home/>
<Footer/>
I want, from the Navbar where I have some link texts, to reload/change the component between Navbar and Footer for another component based on what link I click in the Navbar.
Try this
const Navbar = (props) => {
...
return (
...
<div ... onclick={() => props.getClick()}>
...
</div>
);
}
export default Navbar;
What we did here is simple, we simply passed the function as a prop from the parent. And used the passed props to access and call the function.
im a newone in react and I have tried this example but got an error, with no idea what the issue is.
i simply add a function component of HelloWorld and add it to the app component, but it does not execute.
please help.
App.js
import './App.css';
import welcome from './components/welcome';
import { Component } from 'react';
class App extends Component
{
render()
{
console.log('inside render of app');
return(
<div className="App">
<welcome></welcome>
</div>
);
}
}
export default App;
and
my own functional component, just like to add that I put this file inside the components folder
import React from 'react'
function welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default welcome
Your component names should begin with upper case letters.
From react docs
When an element type starts with a lowercase letter, it refers to a
built-in component like or and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
use Welcome instead of welcome.
Final code
import React from 'react'
function Welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default Welcome
In react js our component name must be start with capital letters.
So there we rename componet welcome to Welcome.
import React from 'react'
function Welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default Welcome
and in App.js use
import './App.css';
import Welcome from './components/Welcome';
import { Component } from 'react';
class App extends Component
{
render()
{
console.log('inside render of app');
return(
<div className="App">
<Welcome></Welcome>
</div>
);
}
}
export default App;
I need to export different components for the same page because they act just as configurations to render other components, I´m new to react so I struggling in finding the solution for this. Here is a codesandbox with a simple example of what I want to achieve: https://codesandbox.io/s/adoring-elion-fq4zt?file=/src/App.js
Thanks!
---- EDITED ----
Thanks for all the answers, thanks to that I realized I had a typo in the component naming, that's why my previous tries didn't work.
I leave here the updated codesandbox, since it might be useful for others:
To export more than one component in a module simply do the following:
export const ComponentOne = () => <span>Some content for ComponentOne</span>;
export const ComponentTwo = () => <span>Some content for ComponentOne</span>;
Then, when you need to import these components simply do:
import { ComponentOne, ComponentTwo } from "./path/of/components"
Please note that the import is with {} because the components are not exported as default.
On the other side, if you have only a component in your file you can simply do the following:
const Component = () => <span>Some content for Component</span>;
export default Component;
And than import as default, without the {} as in the following example:
import Component from "./path/of/components"
// component.js
export const someCom1 = () => {
return <div>Hello 1</div>
}
export const someCom2 = () => {
return <div>Hello 2</div>
}
// parent.js
import {someCom1, someCom2 } from './component.js'
in your page file remove "export" from the: export function componentOn
and keep at the button: export { ComponentOne, ComponentTwo };
to import it use: import {ComponentOne,ComponentTwo} from "./PageOne";
You can keep both components in a single wrapper like this
PageOne.js
import React from "react";
import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";
export default function PageOne() {
return (
<>
<ComponentOne title={"This is the title"} />;
<ComponentTwo description={"This is the description"} />;
</>
);
}
App.js
import React from "react";
import "./styles.css";
import PageOne from "./PageOne";
export default function App() {
return (
<div className="App">
<PageOne />
</div>
);
}
I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;
i've a component that i import, but its not displayed on the page.
this is my app.js file. i imported the <player/>component but it is not getting displayed properly on the browser.
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { player } from "./player";
class App extends Component {
render() {
return (
<div className="App">
<div>
<player />
</div>
</div>
);
}
}
export default App;
this is the contents of the player.js
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot() {
this.setState.shoot = Math.floor(Math.random() * Math.floor(3));
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot}>Shoot another
value</Button>
</div>
);
}
}
In your code, you've exported your player component as a default export
export default class player extemds React.Component
But in your import of it in the other file, you're importing it as a named export
import { player } from "./player";
Try importing it without the curly braces as you would with a default export
import player from "./player";
You are doing two mistakes:
1. Importing the component in the wrong way
2. Rendering the component in the wrong way
Solution
The component should be imported without the curly braces
The react component "player" is supposed to start with capital letters i.e. it should be renamed as Player
Below is the working code I have tried in my local machine. It only modifies App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player"; // imported without curly braces and with capital first letter
class App extends Component {
render() {
return (
<div className="App">
<div>
<Player /> {/* Rendering the correct way */}
</div>
</div>
);
}
}
export default App;
Sidenote
In player.js, you are setting the state in the wrong fashion, it won't work because:
setState is a method and not a object
this is not binded with method shoot. It will throw error something like "cannot read this of undefined" or something
Modify your player.js as following:
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot = ()=>{
this.setState({
shoot: Math.floor(Math.random() * Math.floor(3)),
});
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot()}>Shoot another
value</Button>
</div>
);
}
}
You have two main issues:
1) You export as default and then your import is wrong.
If you export as:
export default class player extemds React.Component
Then you need to import as:
import player from "./player";
2) Components must start uppercase, otherwise React thinks that they are simple HTML tags and not components.
So you must change player to Player everywhere