I'm having trouble "appending" a child component (NewPageSidear) to a specific ID higher up and outside (Main) the parent component (NewPage) that is loading the child component.
I have the following DOM structure that is created in Main.jsx, which is loaded on page load to index.html:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
On page load, I do:
ReactDOM.render(<Dashboard/>,document.querySelector('#main-content'));
ON the Dashboard page, I'll click a button that will execute the following and replace the Dashboard with NewPage:
ReactDOM.render(<NewPage/>,document.querySelector('#main-content'));
My Problem is here:
When NewPage loads, there is a child component, NewPageSidebar that I want to append to #content. If I can get NewPageSidebar to append #content, then I can use componentWillUnmount to remove NewPageSidebar when unmounted. But how do I get NewPageSidebar appended to #content? Any help is very appreciated.
You can do something like:
ReactDOM.render(<NewPage newSidebar={true}/>,document.querySelector('#main-content'));
And in the NewPage:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
{this.props.newSidebar ? <NewSidebar /> : null}
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
Related
Basically, I have a nested component that I want to render with the parent component and it's working fine when the server starts.
But the problem arises when I switch back from another page. Some of the nested components get disappeared. If I made a refresh then again everything ok.
How can I solve this issue?
Normal:
Image-1
Component disappeared:
Image-2
Index.js:
import BannerBaseLine from "./../components/HOME/Banner/BannerBaseLine";
import SubSection1 from "./../components/ABOUT/subSection1";
import CoursesList from "../components/HOME/MOSTTRENDING/CoursesList/courseslist";
import ShortOverview from "./../components/HOME/CourseOverviewSection/Section1/shortoverview";
import Testimonial from "./../components/HOME/Testimonial/testimonial";
import ClientItem from "./../components/HOME/Client-area/all-client-item";
export default function HomeMain({categories}) {
return (
<>
<br></br>
<br></br>
<br></br>
<BannerBaseLine categories = {categories} />
<CoursesList />
{/* <SubSection1 /> */}
<ShortOverview />
<CoursesList />
<Testimonial />
<ClientItem />
</>
);
}
export async function getStaticProps(){
const response = await fetch('http://localhost:8000/api/data/categories')
const data = await response.json()
console.log(data)
return {
props:{
categories : data,
}
}
}
BannerBaseLine component:
import BannerBlock from './BannerBlock';
export default function BannerBaseLine({ categories }) {
return (
<>
<section
className="banner-area"
style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
>
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-8 align-self-center">
<div className="banner-inner text-md-start text-center">
<h1>
Find the Best <span>Courses</span> & Upgrade{" "}
<span>Your Skills.</span>
</h1>
<div className="banner-content">
<p>
Edufie offers professional training classes and special
features to help you improve your skills.
</p>
</div>
<div className="single-input-wrap">
<input type="text" placeholder="Search your best courses" />
<button>
<i className="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<br></br>
<br></br>
<div className="container">
<div className="intro-area-2">
<div className="row justify-content-center">
<div className="col-lg-12">
<div className="intro-slider owl-carousel">
{categories.map((category) => {
return (
<>
<BannerBlock category={category} key={category.id} />
</>
);
})}
</div>
</div>
</div>
</div>
</div>
</>
);
}
BannerBlock component:
export default function BannerBlock({category}) {
console.log(category);
return (
<div className="item">
<div className="single-intro-wrap">
<div className="thumb">
<img src={category.image} alt="img" />
</div>
<div className="wrap-details">
<h6>
{category.Base_Category_Title}
</h6>
<p>236 Course Available</p>
</div>
</div>
</div>
);
}
From https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
Note: You should not use fetch() to call an API route in
getStaticProps. Instead, directly import the logic used inside your
API route. You may need to slightly refactor your code for this
approach.
Fetching from an external API is fine!
you should check if categories exist
export default function HomeMain({categories}) {
if(categories){
return <Loading Component />
}
rest of the code...
}
Say I have a child class extends from parent class.
Parent class renders
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
In child classes, how could I render a HTML DOM like any of below examples without copy paste?
<div id="container" class="style-scope ">
.....
bunch of DOM.
<div id="childContainer">
</div>
</div>
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
<div id="childContainer">
</div>
Have the parent render it’s children.
render () {
return (
<>
<div id="container" className="style-scope ">
.....
bunch of DOM.
</div>
{ this.props.children }
</>
)
}
Then you can do:
<Parent>
<div id=“childContainer”>...</div>
</Parent>
To get:
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
<div id=“childContainer”>...</div>
I am new to React.
I have an app like this:
<>
<Header currentUser={currentUser}></Header>
<Menu items={menuitems}/>
<SubHeader currentUser={currentUser}></SubHeader>
<Breadcrumb items={crumbs} ></Breadcrumb>
<BrowserRouter history={history} >
<div >
<div className="container-fluid main-container">
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-9">
<Switch>
{routes.map((rou,key) => {
return <PrivateRoute exact
path={rou.path}
key={key}
component={rou.component}
canAccess={rou.canAccess}
fallBackComponent={rou.fallBackComponent}/>;
})}
</Switch>
</div>
<div className="col-md-1"></div>
</div>
</div>
</div>
</BrowserRouter >
<Footer ></Footer>
</>
I would expect that every page change (using the Router), React would render only the part between tags , instead, every route change, I see that React reloads all components outside the router like <Header>, <Menu> and so on.
Am I doing something wrong?
I'm setting up a one-page website with react.js, html, and scss. I am struggling to have the entire website have a blur effect or fade when a button is clicked (this will be later used for loading animations). What commands can I use to get this blur when a button is pressed?
render() {
return (
<div className="App">
<div className="top-bar">
<div className="title">poem</div>
<img className="logo" src="./logo.png" />
</div>
<div className="container">
<div className="sloganLineOne">Poem Theme</div>
<div className="sloganLineTwo">Detector</div>
<textarea
className="inputField"
placeholder="Please Enter Your Poem Here..."
/>
<button className="button" onClick={this.fadeOut}>
Enter
</button>
<img className="leftTriangle" src="./leftSideTriangle.png" />
<img className="rightTriangle" src="./rightSideTriangle.png" />
</div>
</div>
)
}
fadeOut = () => this.setState({ fadingOut: true })
}
I expect the entire page to be blurred or look like it when the button is clicked.
All you have to do is apply the style to your parent div and you should be good to go! Give this a shot
class App extends React.Component {
state = { fadingOut: false }
fadeOut = () => this.setState({fadingOut: true});
render() {
return (
<div className="App" style={this.state.fadingOut ? {filter: 'blur(2px)'} : undefined }>
<div className="top-bar">
<div className="title">
poem
</div>
</div>
<div className="container">
<div className="sloganLineOne">Poem Theme</div>
<div className="sloganLineTwo">Detector</div>
<textarea className="inputField" placeholder="Please Enter
Your Poem Here..."></textarea>
<button className="button" onClick={this.fadeOut}>Enter</button>
<img className="leftTriangle" src="./leftSideTriangle.png"/>
<img className="rightTriangle" src="./rightSideTriangle.png"/>
</div>
</div>
);
}
}
See it in action!
I have a map that render few items. How can I pass params like name of the item, id of the item etc to the modal component?
render(){
return(
<div>
<Modal
isOpen={this.state.OpenDeleteModal}
confirmationTitle={`Delete item`}
confirmationCancel={'No'}
confirmationSuccess={'Yes'}
closeModal={this.closeModal}
successModal={this.successModal}
>
<p className="center">Are you sure you want to delete this item?</p>
</Modal>
<div className="wrapper">
{map(items, obj =>
<div key={obj._id} className="panel-body">
<div className="row">
<h2 className="title">{obj.name}</h2>
<a onClick={()=> this.setState({OpenDeleteModal:true})}>Delete</a>
</div>
</div>
)}
</div>
</div>
)
}
I only can think of put the obj._id in the tag as custom attribute and when user click on delete it change the state of the selectedItem, pass it through props.
One simple solution is to remember for which item you have opened the modal. Something like below. Set the selected item when you open the modal. During delete, fetch it from state and delete it.
render(){
return(
<div>
<Modal
isOpen={this.state.OpenDeleteModal}
confirmationTitle={`Delete item`}
confirmationCancel={'No'}
confirmationSuccess={'Yes'}
closeModal={this.closeModal}
successModal={this.successModal}
>
<p className="center">Are you sure you want to delete this item?</p>
</Modal>
<div className="wrapper">
{map(items, obj =>
<div key={obj._id} className="panel-body">
<div className="row">
<h2 className="title">{obj.name}</h2>
<a onClick={()=> this.setState({OpenDeleteModal:true, selectedItem: obj._id})}>Delete</a>
</div>
</div>
)}
</div>
</div>
)
}
UPDATE: Make sure to clear the selectedItem after you close the modal.
A modal can access the state of the react component, you can store the information of the selected link in state
storeInformation(item) {
this.setState({OpenDeleteModal:true,
selectedId: item.id
selectedName: item.name
})
}
render(){
return(
<div>
<Modal
isOpen={this.state.OpenDeleteModal}
confirmationTitle={`Delete item`}
confirmationCancel={'No'}
confirmationSuccess={'Yes'}
closeModal={this.closeModal}
successModal={this.successModal}
>
<p className="center">Are you sure you want to delete this item?</p>
<div>Name is: {this.state.selecteName}</div>
</Modal>
<div className="wrapper">
{map(items, obj =>
<div key={obj._id} className="panel-body">
<div className="row">
<h2 className="title">{obj.name}</h2>
<a onClick={()=> this.storeInformation(obj)}>Delete</a>
</div>
</div>
)}
</div>
</div>
)
}