Export default failed in JSX with babel - javascript

Basically I'm trying to rendering a Footer class in accounts.js. (Actually the extension should be .jsx, while it won't solve the problem here I think.)
First I import the Footer in accounts.jsx:
import React from "react";
import {Footer} from "../utils/footer.js";
import {SEEMIKO_LOGO} from "./const.js";
export default React.createClass({
render: function () {
return (
<div>
<div className="container">
<div className="row login-div">
<div className="col-lg-offset-2 col-lg-3"
style={{marginTop: '2vw'}}>
<img src={SEEMIKO_LOGO}/>
</div>
<div className="col-lg-offset-6">
{this.props.children}
</div>
</div>
</div>
<Footer/>
</div>
);
}
});
Then I define footer.js below:
import React from "react";
// var Footer = React.createClass({
export default React.createClass({
render: function () {
return (
<footer className="footer">
<div className="container">
<p className="copyright" style={{color: "black"}}>
C 西米糕 Seemiko Inc. 2014 - Current. 浙XXXXX
</p>
<ul className="footer-links">
<li>
用户反馈
</li>
<li>
使用帮助
</li>
<li>
关于我们
</li>
</ul>
</div>
</footer>
);
}
})
// works
// export {Footer};
The weird thing is if I use export default in footer.js, it will failed. But once I switch to var Footer with export Footer, all set. Any idea?
Thank you!

If you have a default export you also need to use a default import:
import Footer from '...';

Related

Next js Problem with sending props in through

So i have three files, and i am using Next.Js.
Those 3 files are _app.js, Layout.js, Navbar.js
_app.js
import '../styles/globals.css'
import '../styles/navbar.css'
import Layout from '../components/Layouts/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout primary_super='darkMode_Primary' secondary_super='darkMode_Secondary'>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
Layout.js
import Navbar from '../comps/Navbar'
import pt from 'prop-types';
export default function Layout({ children }, props) {
return (
<>
<Navbar primary={props.primary_super} secondary={props.secondary_super}/>
<main>{children}</main>
</>
)
}
Layout.pt = {
primary_super: pt.string,
secondary_super: pt.string,
};
Layout.defaultProps = {
primary_super: 'darkMode_Primary',
secondary_super: 'darkMode_Secondary',
}
Navbar.js
import theme from "../Data/theme"
import pt from 'prop-types';
export default function Navbar(props) {
const Primary = theme[props.primary]
const Secondary = theme[props.secondary]
return (
<div class="NAV" id="NAV" style={Primary}>
<div class="NAV_BOX_FULL NAV_LEX" style={Secondary}>
<img src="/NAV_img/cat.png" alt="" class="NAV_logo1 NAV_logo"/>
<h3 class="NAV_head">SilenxIka</h3>
</div>
<hr class="NAV_block"/>
<div class="NAV_BOX">
<img src="/NAV_img/home.png" alt="" class="NAV_logo"/>
<h3 class="NAV_head">Home</h3>
</div>
<div class="NAV_BOX">
<img src="/NAV_img/discord.png" alt="" class="NAV_logo"/>
<h3 class="NAV_head">Discord</h3>
</div>
<div class="NAV_BOX">
<img src="/NAV_img/about.png" alt="" class="NAV_logo"/>
<h3 class="NAV_head">About</h3>
</div>
<div class="NAV_BOX">
<img src="/NAV_img/projects.png" alt="" class="NAV_logo"/>
<h3 class="NAV_head">Projects</h3>
</div>
<div class="NAV_BOX">
<img src="/NAV_img/contact.png" alt="" class="NAV_logo NAV_SUS"/>
<h3 class="NAV_head">Contact Me</h3>
</div>
</div>
)
}
Navbar.pt = {
primary: pt.string,
secondary: pt.string,
};
All i want to do is, do some logic in _app.js then send two strings into Layout.js and then finally in Navbar.js to access those two strings, as you can see i tried to use props but it didn't work well.

React.JS Context API Problem (Rendering Problem)

I'm currently trying to implement a e-commerce project. My question is about Context API and Reducer.
Cannot able to render price and other details of the product. in Cart Component
Context.Js ;
Here is my Context.js
Reducer.JsHere is the Reducer.js
And My Product Component Code is ;
import './Product.css'
import AddBoxIcon from '#material-ui/icons/AddBox';
import { Context } from "./Context"
import React, {useContext} from "react"
function Product({title,price,image,id}) {
const {addtoBasket} = useContext(Context)
/*
function alertUser() {
alert(`${title} added to your card`)
}
function addBasket(){
console.log(title,price)
}
function firedFunctions(){
alertUser()
addBasket()
}
*/
return (
<div className="product">
<div className="product__info">
<img src={image} alt=""></img>
<p className="title">{title}</p>
<div className ="price__add" >
<h4>Price : {price} $</h4>
<div onClick={() => addtoBasket(title, price, image,id)}>
<AddBoxIcon className="btn" />
</div>
</div>
</div>
</div>
)
}
export default Product
And My Cart Component Code is ;
import React, {useContext} from 'react'
import './Cart.css'
import {Context} from "./Context"
import Product from "./Product"
function Cart() {
const {basket} = useContext(Context)
console.log(basket) // Expected: Empty Array
return (
<div className="cart">
<div className="cart__left">
<h2>Your Products</h2>
<div>
{basket.map((product) =>(
<h4>{product}</h4>
{/*why product give me just a title of product*/}
))}
</div>
</div>
<div className="cart__right">
<h2>Total</h2>
</div>
</div>
)
}
export default Cart
And this is the output when i click the button v.1(console) ;
I want to see Price and image either.
You are passing three parameters to addToBasket function, however it is receiving just one object.
Probably what you needs is:
<div onClick={() => addtoBasket({title, price, image, id)}>
I've just replicate it in codesandbox, this is the right answer, take a look:
https://codesandbox.io/s/awesome-violet-fr7np?file=/src/index.js

How to run animation only once while current session?

I have a website page that uses react-anime and react-typing-animation. My issue is to animate some elements displayed on it only once while the current session. So, if my site was opened on the main page, the animation would launch, and then, after switching a few pages and returning back to the main page, the animation wouldn't be executed again.
I've thought about sessionStorage, but I don't understand how to use it with these libraries.
Here's all the code:
index.js
import React from 'react'
import styles from './Index.module.css'
import Greeting from '../components/main/Greeting'
import Yelnya from '../components/main/Yelnya/Yelnya'
import BlueLakes from '../components/main/BlueLakes'
import Gallery from "../components/main/Gallery";
export default function Home() {
return (
<div className={styles.container}>
<Greeting />
<Yelnya />
<BlueLakes />
<Gallery />
</div>
)
}
Greeting.js
import React from 'react'
import styles from './Greeting.module.css'
import Tag from './Tag'
import Anime from "react-anime";
import Typing from "react-typing-animation"
export default function Greeting() {
return (
<div className={styles.root}>
<div className={styles.title}>
<Typing startDelay={50} speed={100}>
Explore Belarusian nature with us.
</Typing>
</div>
<div className={styles.hint}>
<Anime
opacity={[0,1]}
translateX={[-50,0]}
duration={3000}
delay={4200}
>
<p className={styles.hintTitle}>Go to:</p>
</Anime>
<Tag title="#Yelnya" link="/#yelnya" delay={4400}/>
<Tag title="#Blue lakes" link="/#blue-lakes" delay={4500}/>
<Tag title="#Galleries" link="/#galleries" delay={4600}/>
</div>
</div>
)
}
Tag.js
import React from 'react'
import styles from './Tag.module.css'
import Link from 'next/link'
import Anime from "react-anime";
export default function Tag({ title, link, delay }) {
return (
<Anime
opacity={[0,1]}
translateY={[50,0]}
duration={3000}
delay={delay}
>
<Link href={link}>
<div className={styles.tag}>
<p className={styles.text}>{title}</p>
</div>
</Link>
</Anime>
)
}
I made an example for using LocalStorage and handle animation with them
export default function App() {
const animated = !!localStorage.getItem("animated");
if (animated === false) {
localStorage.setItem("animated", true);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{!animated && (
<Anime
opacity={[0, 1]}
translateX={[-50, 0]}
duration={3000}
delay={500}
>
<p>Go to:</p>
</Anime>
)}
{animated && <p>Go to:</p>}
</div>
);
}
also you can test it here

Functional component is not being rendered

I am trying to display the songs but for some reason my songs component is not even being executed. The console.log statement inside the Songs component is also not being logged to console. Also no errors of any sort are detected at all.
Here is my body component from which I am calling the Songs component
import './body.css'
import React from 'react'
import Header from './Header'
import { useStateValue } from './StateProvider';
import FavoriteIcon from '#material-ui/icons/Favorite';
import PlayCircleFilledIcon from '#material-ui/icons/PlayCircleFilled';
import MoreHorizIcon from '#material-ui/icons/MoreHoriz';
import Songs from './Songs.js'
function Body( {spotify}) {
const [{recently_played},dispatch] = useStateValue();
return (
<div className="body">
<Header spotify={spotify} />
<div className="body__info">
<img src={recently_played?.images[0].url} alt=""/>
<div className="body__infotext">
<strong>PLAYLIST</strong>
<h2>On Repeat</h2>
<p>{recently_played?.description}</p>
</div>
</div>
<div className="body__songs">
<div className="body__icons">
<PlayCircleFilledIcon className="body__shuffle"/>
<FavoriteIcon fontSize="large"/>
<MoreHorizIcon />
</div>
{recently_played?.tracks.items.map(item=>{
<Songs track={item.track} />
})}
</div>
</div>
)
}
export default Body
Here is the Songs component
import React from "react";
import './SongRow.css'
function Songs({ track }) {
console.log(track);
return (
<div className="songRow" >
<img className="songRow__album" src={track.album.images[0].url} alt="" />
<div className="songRow__info">
<h1>{track.name}</h1>
<p>
{track.artists.map((artist) => artist.name).join(", ")} -{" "}
{track.album.name}
</p>
</div>
</div>
);
}
export default Songs;
You are not returning anything inside the map
{recently_played?.tracks.items.map(item => {
return <Songs track={item.track} />;
})}
[or] use the shorthand version of arrow function
{recently_played?.tracks.items.map(item => <Songs track={item.track} />)}

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest
It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

Categories