I tried to send show_request value to TopMenu component, which is external component, but it did not pass. In TopMenu, If I output show_request on console it responses undefined
import React, { useState } from "react";
import TopMenu from "../../components/top-menu/top-menu";
import { projects } from "./project.data";
import "./projects.scss";
const Projects = () => {
return (
<div className="projects-page">
<div className="request"
onClick={() => <TopMenu show_request={true} />}
>
DROP REQUEST
</div>
</div>
);
};
export default Projects;
I did this, and I thought show_request=true in TopMenu
<div className="request"
onClick={() => <TopMenu show_request={true} />}
>
DROP REQUEST
</div>
My code In TopMenu
const TopMenu = ({ show_request }) => {
console.log(show_request); // It should be show_request=true, but it is undefined
}
Related
The point is to implement a dynamic SSR component can be re-rendered by a search input.
I solved this by creating a layout.tsx file on my specific router then import children which made me dynamic render ssr component by the client component:
Layout.tsx
import React, { Suspense } from "react";
import Search from "./Search";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="layout">
<Search />
{children}
</div>
);
}
Search.tsx
"use client";
import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
export default function Search() {
const [text, setText] = useState<string>("")
const router: any = useRouter();
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setText('')
router.push(`/definition/${text}`)
}
return (
<form onSubmit={handleSubmit} className='search'>
<input onChange={(e) => setText(e.target.value)}
value={text} type="text"
placeholder={"write to search"} />
</form>
);
} );
}
import { Container } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import Layout from '../../components/Layout/Layout'
const CartScreen = () => {
const cart = useSelector(state => state.cart)
const { cartItems } = cart
console.log(cartItems)
return (
<Layout>
<Container>
<div>
<h1>Shopping Cart</h1>
{cartItems && cartItems.length === 0 && <p>Your cart is empty </p>}
</div>
</Container>
</Layout>
)
}
export default CartScreen
This code gives me that Hydration Error only when 'cart' is empty
I don't know how to use useEffect on this and I use redux toolkit.
In this dynamic page, we have to fetch different APIs by coming from different routes. I want to dynamically fetch and list not only fetchProducts, but also crops from any data on this page. For example: How should we do this? the code you see is from index.js
File structure:
product/
[category]
[slug].js
index.js
import React, { useEffect } from "react";
import { ProductCard } from "#components/Product/ProductCategory/ProductList";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts } from "redux/slices/product/productCategorySlice";
import { useRouter } from "next/router";
import Link from "next/link";
const CategoryDetail = () => {
const router = useRouter();
const { category } = router.query;
const productList = useSelector((state) => state.productCategory);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchProducts(category));
}, [dispatch, category]);
return (
<div className="container max-w-full">
<div className="flex flex-row py-24">
<div className="w-80per pl-30">
{productList.loading && console.log("Loading now...")}
{!productList.loading && productList.error
? console.log(productList.error)
: null}
{!productList.loading && productList.productList.data
? (
<div className="grid grid-cols-4 gap-5">
{productList.productList.data.data.map((item) => (
<ProductCard key={item} data={item} modal={false} />
))}
</div>
)
: null}
</div>
</div>
</div>
);
};
export default CategoryDetail;
I am working with custom Transition component and my inline styling just wont apply. I tried everything what is in my power and just got myself angry. Can somebody explain why this doesn't work.
Modal show itself on initial load and by clicking on button for show or not show this doesn't react. I mean state updates correctly (this console.log shows 0 and 1 when it should) but styling just wont apply.
import classes from "./App.module.css";
import ReactDOM from "react-dom";
import React from "react";
import Modal from "./components/Modal/Modal";
import List from "./components/List/List";
import Backdrop from "./components/Backdrop/Backdrop";
import { useState } from "react";
import Transition from "react-transition-group/cjs/Transition";
function App() {
const [modalOpen, setModalOpen] = useState(false);
const onOpenModalHandler = () => {
setModalOpen(true);
};
const onCloseModalHandler = () => {
setModalOpen(false);
};
return (
<div className={classes["App"]}>
<h1>React Animations</h1>
<Transition in={modalOpen} timeout={1000} onMountEnter onMountExit>
{(state) => {
console.log(state);
console.log(state === "exiting" || state === "exited" ? 0 : 1);
return ReactDOM.createPortal(
<Modal
closeModal={onCloseModalHandler}
modalState={modalOpen}
style={{
transition: `opacity 300ms ease-out`,
opacity: state === "exiting" || state === "exited" ? 0 : 1,
}}
/>,
document.getElementById("modal")
);
}}
</Transition>
{modalOpen &&
ReactDOM.createPortal(
<Backdrop />,
document.getElementById("backdrop")
)}
<button className={"Button"} onClick={onOpenModalHandler}>
Open Modal
</button>
<h3>Animating Lists</h3>
<List />
</div>
);
}
export default App;
Modal
import classes from "./Modal.module.css";
const Modal = (props) => {
const classNames = props.modalState
? `${classes["modal-open"]} ${classes["Modal"]}`
: `${classes["modal-close"]} ${classes["Modal"]}`;
const onCloseModalHandler = () => {
props.closeModal();
};
return (
<div className={classNames}>
<h1>A Modal</h1>
<button className="Button" onClick={onCloseModalHandler}>
Dismiss
</button>
</div>
);
};
export default Modal;
Given the following component, which is structually similar to redux's demo component.
My primary issue is that props is always undefined even if the state in the store is perfectly valid
Note: In the link I'm looking at the 'containers/AddTodo.js', if the link doesn't directly take you to the snippet
import React from 'react';
import { connect } from 'react-redux';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import Label from 'react-bootstrap/lib/Label';
let HeaderContainer = ({props}) => { //props = undefined
return(
<div>
<Label bsStyles="warning">
<Glyphicon glyph="exclamation" />
{props.openCount}
</Label>
<Label bsStyle="success">
<Glyphicon glyph="ok" />
{props.completedCount}
</Label>
</div>
);
}
const mapStateToProps = (state) => {
return {
openCount: state.tasks.filter( task => !task.completed).length,
completedCount: state.tasks.filter( task => task.completed ).length
};
}
HeaderContainer = connect(mapStateToProps)(HeaderContainer);
export default HeaderContainer;
Remove {} from the ({props}). If you want to use destructuring, try ({openCount, completedCount})
let HeaderContainer = (props) => //...
let HeaderContainer = ({openCount, completedCount}) => //..