I have a NextJS application, with the following page:
Page:
import Layout from "#/components/app/Layout";
import Sidebar from "#/components/app/Sidebar";
export default function SiteIndex() {
return (
<Layout>
<div className="flex">
<Sidebar />
<div className="m-5">
<iframe src="/page.htm"></iframe>
</div>
</div>
</Layout>
);
}
This page has an iframe, a parent Layout component, and one more component called Sidebar.
Parent Layout:
export default function Layout({ children }) {
return (
<div>
<div class="h-12 bg-gray-200 flex">
<div className="m-2 grow">Parent Layout</div>
<button className="bg-blue-500 text-white p-3">Reload iFrame Button</button>
</div>
<div>{children}</div>
</div>
)
}
Sidebar:
export default function Sidebar() {
return (
<div className="w-64 border border-r-100 m-5">
<div>Sidebar</div>
<button className="bg-blue-500 text-white p-3">Reload iFrame Button</button>
</div>
)
}
Both Layout and Sidebar have a button. I want to be able to reload the iframe on the press of any of those buttons. How can I achieve this in react/nextjs project? primarily I'm looking for the best way to reload an iFrame within reactjs.
Would it work for your application to add a key={keyValue} to the iframe? You can then set the value of that key whenever the button gets pressed. This should cause a re-render.
export default function SiteIndex() {
const [keyValue, setKeyValue] = useState(0);
return (
<Layout onButtonClick={() => setKeyValue(keyValue + 1)} >
<div className="flex">
<Sidebar onButtonClick={() => setKeyValue(keyValue + 1)} />
<div className="m-5">
<iframe src="/page.htm" key={keyValue}></iframe>
</div>
</div>
</Layout>
);
}
And in your component
Related
I want to change page when the div is clicked but when the page loads it automatically navigates to another page without clicking the div.
Why is the code navigating without clicking?
import React, { Component } from "react";
import { useNavigate } from "react-router-dom";
export function Homerouter(props) {
const navigate = useNavigate()
return(<Home navigate={navigate}></Home>)
}
export default class Home extends Component{
state = {categor: [{categ:"cat1", img: "https://teelindy.com/wp-content/uploads/2019/03/default_image.png"}, {categ:"cat2", img: "./imgs/notfound.png"}, {categ:"cat3", img: "./imgs/notfound.png"}, {categ:"cat4", img: "./imgs/notfound.png"}, {categ:"cat5", img: "./imgs/notfound.png"}, {categ:"cat6", img: "./imgs/notfound.png"}]}
linkto(name) {
//doing something else
this.props.navigate(name)
}
createelem() {
return(
<div className="cont text-center">
<div className="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
{this.state.categor.map((items, index) => {
return (
<div key={items.categ} className="col">
<div onClick={this.linkto("a")} className="card">
<img src={(items.img)} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{items.categ}</h5>
</div>
</div>
</div>
);
})}
</div>
</div>
)
}
render() {
return(
<React.Fragment>
{this.createelem()}
</React.Fragment>
)
}
}
Cause you're invoking the function linkto immediately. Wrap this.linkto("a") as this:
onClick={() => this.linkto("a")}
Issue
You've a callback that is being immediately invoked when the component renders.
{this.state.categor.map((items) => {
return (
<div key={items.categ} className="col">
<div
onClick={this.linkto("a")} // <-- immediately called when rendered
className="card"
>
...
</div>
</div>
);
})}
Solution
You can either pass an anonymous callback function:
<div
onClick={() => this.linkto("a")}
className="card"
>
...
</div>
Or convert linkto to a curried function:
linkto(name) {
...
return e => {
// do anything with the click event e if necessary
this.props.navigate(name); // navigate
};
}
...
<div
onClick={this.linkto("a")}
className="card"
>
...
</div>
Or if there isn't any additional logic necessary directly call navigate in an anonymous callback:
<div
onClick={() => this.props.navigate("a")}
className="card"
>
...
</div>
I'm creating a youtube clone using react js and i used this icon
import HomeIconfilled from '#mui/icons-material/Home';
import HomeIcon from '#mui/icons-material/HomeOutlined';
That looks like this HomeIconfilled
which gets rendered by calling this function
<Sidebariconfunc Icon={HomeIconfilled} Title="Home"/>
That takes 2 parameters and reder the icon
function Sidebariconfunc({Icon,Title}) {
return (
<div className='SidebarRow'>
<div className='Sidebar_Icon'>
<Icon/>
</div>
<div className='Slidebar_Title'>
{Title}
</div>
</div>
)
}
How can i chane the props name to HomeIcon when i click on the icon so that it changes to this this icon HomeIcon
Thamks !
function SidebarIcon({ActiveIcon, InactiveIcon, title, isActive}) {
return (
<div className='SidebarRow'>
<div className='Sidebar_Icon'>
{isActive ? <ActiveIcon/> : <InactiveIcon />
</div>
<div className='Slidebar_Title'>{Title}</div>
</div>
)
}
Usage:
const [isActive, setIsActive] = React.useState(false)
return (
<a onClick={() => setIsActive(!isActive)>
<SidebarIcon
ActiveIcon={HomeIconfilled}
InactiveIcon={HomeIcon}
title='Home'
isActive={isActive}
/>
</a>
)
In a nutshell, i am creating a case study for a potential job, the employer wants me to use a React app to create it...
I want to create a button that has the start function that:
Hides original content
displays the hidden content,
i got the hidden content to show but the original content is still visible, any help?
my code below:
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
const [hide, setHidden] = useState(true);
return (
<>
<div className='container'>
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={ () => setShow(s => ! s) } className='btn'>Start!</button>
</div>
{/* URL Link Input */}
<div>
{!show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null }
</div>
</div>
</>
)
}
export default Body
You are close, you need to have the original content in the ternary so it's hidden once you toggle show. I also changed setShow to set show to false rather than the previous value since it doesn't matter because the button is not toggable because once you click it and can't re toggle the original content.
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
return (
<div className='container'>
{show ? (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(false)} className='btn'>Start!</button>
</div>
) : (
<form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form>
)
</div>
)
}
export default Body
it dose not need hide state and you can toggle visibility just with show state. try this:
{ show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null
}
This should work.
import React, { useState } from 'react';
function Body() {
const [show, setShow] = useState(false);
return (
<>
<div className="container">
{/* URL Link Input */}
<div>
{show ? (
<form action="GET">
<input type="text" />
<button className="btn">Submit</button>
</form>
) : (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(!show)} className="btn">
Start!
</button>
</div>
)}
</div>
</div>
</>
);
}
export default Body;
You could use an appStarted state and then render your component conditionnally:
const { useState } = React
function Body() {
const [appStarted, setAppStarted] = useState(false)
return (
<div className="container">
{appStarted ? (
<div>
<h2>Hidden Content</h2>
</div>
) : (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={ () => setAppStarted(true) } className='btn'>Start!</button>
</div>
)}
</div>
)
}
ReactDOM.render(<Body />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
on Click of button the state should be able to render component using statename.map.. Thankyou
<div className="container mt-5">
<div className="row">
<div className="card pt-3">
<div className="col-lg-12">
<h4>Promotional Rates</h4>
<p>
Create promotional rate(s)
</p>
<button className="btn btn-primary my-3" onClick={???}>
Add New Promotional Rates
</button>
<<<<<<<render child component here using .map>>>>>>>>>
</div>
</div>
</div>
</div>
creat a state and u can use whatever method in the js code bellow
import React,{useState} from "react"
const ParentComponent = () =>{
const [ShowChild,setShowChild]=useState(false)
return(
<div>
//methode 1
{ShowChild && ChildComponent}
// end methode 1
//methode 2
{ShowChild? <ChildComponent /> : ''}
//end methode 2
<button onClick={()=>setShowChild(!ShowChild)}>show child Button </button>
</div>
)}
const ChildComponent = () => {
return(
<h1>I m a child</h1>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
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...
}