How I can do something like planet on this link with help ScrollMagic in React?
My code
<div className={styles.containerMain}>
<div>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
top: '0',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
top: '-500px',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id="first-container" style={{ height: '100vh', position: 'relative' }}>
<div className={styles.container}>
<div className={styles.contentContainer}>
<div className={styles.textSmall}>We</div>
<div className={styles.textLarge}>Deliver</div>
<div className={styles.containerText}>
<div className={styles.textSmall}>Quality</div>
<div className={styles.textSmall}>Software </div>
</div>
<div className={styles.textLarge}>Globally</div>
<div className={styles.globe}>
<Globe /> //this is image svg
</div>
</div>
</div>
</div>
</Tween>
)}
</Scene>
</Controller>
</div>
</div>
I need:
I see part of my image and than I am scrolling and I see full of my image (image replace text), than do something like in link
Related
It's a beautiful day but this thing is blocking my view:
I've tried everything (except asking a question ._.) and searched everywhere. But the expected result could not be obtained :'(
So, this is my code where I think the error is happening:
<div className="mt-3">
{data.activities?.map((act) => {
return <Chip className="mr-2 px-3" label={act} key={act.id} />;
})}
</div>{" "}
Well it's a part of my file packageCard.js but if you want the whole file here it is:
import Chip from "#material-ui/core/Chip";
import Clock from "./img/main_page_icons/clock.svg";
import Person from "./img/main_page_icons/person.svg";
import MapPin from "./img/main_page_icons/map-pin.svg";
import Package1 from "./img/main_page/package 1.png";
function PackageCard({ data }) {
console.log(data);
return (
<>
<div className="col-lg-4 col-md-6 col-sm-12 card-super-container">
<div className="card-container">
<div className="card-image-wrapper">
<div>
<div className="card-image-background">
<img
alt="package 1"
src={data.featuredImg}
style={{ borderRadius: "6px" }}
className="w-100 "
/>
</div>
</div>
</div>
<div className="card-details-container">
<span className="text-bold details-container-header">
{data.name}
</span>
<div>
<div className="card-details-text">
<div>{data.description}</div>
<div>
<h6 className="card-price">{`Price: ${data.price} USD`}</h6>
</div>
</div>
</div>
</div>
<div>
<div className="card-final-desc">
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={Clock} className="mr-1" />
{` ${data.days}D / ${data.nights}N `}
</div>
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={Person} className="mr-1" />
{` ${data.noOfPersons} Person `}
</div>
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={MapPin} className="mr-1" />
{` ${data.destination} `}
</div>
</div>
</div>
<div className="card-btn-container">
<button className="btn zoki-btn">Book Now </button>
</div>
</div>
</div>
<div className="col-lg-4 mb-4">
<img
alt="package 1"
src={data.featuredImg}
style={{ height: 250 }}
className="w-100"
/>
<div
className="bg-white py-4 px-4 shadow-lg"
style={{ fontSize: 14, textAlign: "start" }}
>
<h6>{data.name}</h6>
<p>{data.description}</p>
<div className="d-flex justify-content-between w-100">
<h6 className="m-0">{`Price: ${data.price} USD`}</h6>
<h6 className="m-0" style={{ color: "#9C8E35", cursor: "pointer" }}>
Book Now
</h6>
</div>
/!*{" "}
<div className="mt-3">
{data.activities?.map((act) => {
return <Chip className="mr-2 px-3" label={act} key={act.id} />;
})}
</div>{" "}
*!/
</div>
<div
className="row shadow mx-3"
style={{ backgroundColor: "#9C8E35", fontSize: 12 }}
>
<div className="col-4 p-0 text-center">
<div
className="py-2 text-white d-flex w-100 justify-content-center"
style={{ borderRight: "1px solid white" }}
>
<img alt="clock" src={Clock} className="mr-1" />
<p className="mb-0">{` ${data.days} D / ${data.nights} N `}</p>
</div>
</div>
<div className="col-4 p-0">
<div
className="py-2 text-white d-flex w-100 justify-content-center"
style={{ borderRight: "1px solid white" }}
>
<img alt="clock" src={Person} className="mr-1" />
<p className="mb-0">{` ${data.noOfPersons} Person `}</p>
</div>
</div>
<div className="col-4 p-0">
<div className="py-2 text-white d-flex w-100 justify-content-center">
<img alt="clock" src={MapPin} className="mr-1" />
<p className="mb-0">{` ${data.destination} `}</p>
</div>
</div>
</div>
</div>
</>
);
}
export default PackageCard;
Packages.js Component
import { useState, useEffect } from "react";
import { getAvailablePackages } from "crud";
import PackageBg from "../../../assets/img/offers.jpg";
import Card from "./packageCard";
import CircularProgress from "#material-ui/core/CircularProgress";
import { useHistory } from "react-router-dom";
function Packages() {
const history = useHistory();
const [listPackages, setListPackages] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const params = {
search: { query: "" },
sort: "name",
page: 1,
pageSize: 3,
};
setLoading(true);
getAvailablePackages(params)
.then((res) => {
// console.log(res.data.data)
setListPackages(res.data.data.travelPackages);
setLoading(false);
})
.catch((error) => {
console.log(error.response.data);
console.log(error.response.status);
setLoading(false);
});
}, []);
let checkData = [
{
name: "ahmad",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "England",
featuredImg:
"https://media.gettyimages.com/photos/castle-combe-in-the-fall-wiltshire-england-picture-id157006201?s=612x612",
},
{
name: "ali",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "homeland",
featuredImg:
"https://images.unsplash.com/photo-1538332576228-eb5b4c4de6f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlubGFuZHxlbnwwfHwwfHw%3D&w=1000&q=80",
},
{
name: "ali",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "finland",
featuredImg:
"https://images.unsplash.com/photo-1538332576228-eb5b4c4de6f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlubGFuZHxlbnwwfHwwfHw%3D&w=1000&q=80",
},
];
return (
<div
id="zoki-packages"
className="text-center py-5 my-5"
style={{
backgroundImage: `url(${PackageBg})`,
backgroundPosition: "center",
backgroundSize: "cover",
}}
>
<div className="container" style={{ color: "#344767" }}>
<h6 className="text-bold font-italic"> EXPLORE GREAT PLACES </h6>
<h1 className=""> Popular Packages </h1>
<div className="row justify-content-center align-content-center">
{checkData?.map((pkg) => {
return <Card data={pkg} key={pkg.id} />;
})}
{loading ? (
<CircularProgress className="my-4 ml-auto mr-auto" />
) : listPackages.length ? (
listPackages?.map((pkg) => {
return <Card data={pkg} key={pkg.id} />;
})
) : (
<h4 className="my-4 ml-auto mr-auto">
No Package Available at that time.
</h4>
)}
</div>
{listPackages.length ? (
<button
onClick={() => history.push("/search-packages")}
className="btn btn-dark px-4 p-2 rounded-pill my-4"
style={{ color: "#CFBD45", backgroundColor: "black", fontSize: 14 }}
>
<p className="mb-0"> VEIW ALL PACKAGES </p>
</button>
) : null}
</div>
</div>
);
}
export default Packages;
I will be very grateful if you find a solution. I appreciate any help you can provide <33
It seems that the act does not have a unique id, try using the index of the map.
<div className="mt-3">
{data.activities?.map((act, i) => (
<Chip className="mr-2 px-3" label={act} key={i} />
))}
</div>
if you use the act.id as the key,should make sure every id is unique cause
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
here is the official docs
Code:-
const [Close, setClose] = useState(true)
<div className="allDivs">
{item.map((item, index) => {
// console.log("myDivs", myDivs);
return (
<Fragment key={index} >
<div className="tableHeaderBody" id="CLOSEDIV" style={{display: Close ? 'initial' : 'none'}}>
<div className="TableText">
<div className="TableTextHide"></div> <div style={{ color: "white" }} id="SHOW">{item.val}</div></div>
<div className="CloseIcon" id="CloseBtn"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} onClick={() => setClose(false)} /></div>
</div>
</Fragment>
)
})
}
</div>
I want that when i click the Red circle at any div (show in image) it close the div, but right now when i click the One div red circle its closes all the div
please help.
Try this:
Create a new component ChildComponent:
export default function ChildComponent({item}) {
const [Close, setClose] = useState(true) // Every Child now has it's own setClose controll
return (
<Fragment>
<div className="tableHeaderBody" id="CLOSEDIV" style={{display: Close ? 'initial' : 'none'}}>
<div className="TableText">
<div className="TableTextHide"></div>
<div style={{ color: "white" }} id="SHOW">{item.val}</div>
</div>
<div className="CloseIcon" id="CloseBtn">
<FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} onClick={() => setClose(false)} />
</div>
</div>
</Fragment>
)
}
Pass the ChildComponent to your component shown above:
<div className="allDivs">
{item.map((item, index) => (
<div key={index}>
<ChildComponent item={item} />
</div>
))}
</div>
I am trying to use a ternary operator inside a map, but not to sure why this is wrong? Getting a parsing error at the end of the ternary
code:
return(
<div className='Card'>
<div className='TableTopbar ScheduleGrid'>
<div>id</div>
<div>interval</div>
<div>project_id</div>
<div>database</div>
<div>create_timestamp</div>
<div>create_user_id</div>
<div>Edit</div>
</div>
{scheduleData.map((schedule)=>
{UsageMode === 'Read' ?
<div className='Table ScheduleGrid'>
<div>{schedule.id}</div>
<div>{schedule.interval}</div>
<div>{schedule.project_id}</div>
<div>{schedule.database}</div>
<div>{schedule.create_timestamp}</div>
<div>{schedule.create_user_id}</div>
<div>
<EditIcon
style={{padding: '2px', width: '0.8em', height: '0.8em', marginRight: '5px'}}
className='CircleButton'
onClick={onEditScheduleClick}
/>
</div>
</div>
:
<div>ID</div>
}
)
)
export default scheduleRowTwo
Updated code:
return(
<div className='Card'>
<div className='TableTopbar ScheduleGrid'>
<div>id</div>
<div>interval</div>
<div>project_id</div>
<div>database</div>
<div>create_timestamp</div>
<div>create_user_id</div>
<div>Edit</div>
</div>
{scheduleData.map((schedule)=>
(
{UsageMode === 'Read' ?
<div className='Table ScheduleGrid'>
<div>{schedule.id}</div>
<div>{schedule.interval}</div>
<div>{schedule.project_id}</div>
<div>{schedule.database}</div>
<div>{schedule.create_timestamp}</div>
<div>{schedule.create_user_id}</div>
<div>
<EditIcon
style={{padding: '2px', width: '0.8em', height: '0.8em', marginRight: '5px'}}
className='CircleButton'
onClick={onEditScheduleClick}
/>
</div>
</div>
:
<div>ID</div>
}
)
)
export default scheduleRowTwo
Updated error:
Apparently, your outermost div does not have a closing tag, thus resulting in an error.
Also, you're missing a return statement.
return (
<div className="Card">
<div className="TableTopbar ScheduleGrid">
<div>id</div>
<div>interval</div>
<div>project_id</div>
<div>database</div>
<div>create_timestamp</div>
<div>create_user_id</div>
<div>Edit</div>
</div>
{scheduleData.map((schedule) => {
return UsageMode === "Read" ? (
<div className="Table ScheduleGrid">
<div>{schedule.id}</div>
<div>{schedule.interval}</div>
<div>{schedule.project_id}</div>
<div>{schedule.database}</div>
<div>{schedule.create_timestamp}</div>
<div>{schedule.create_user_id}</div>
<div>
<EditIcon
style={{
padding: "2px",
width: "0.8em",
height: "0.8em",
marginRight: "5px",
}}
className="CircleButton"
onClick={onEditScheduleClick}
/>
</div>
</div>
) : (
<div>ID</div>
);
})}
</div>
);
Try this code. Should work.
You should enclose this code block with parentheses because you're trying to implicitly return an object (without the return keyword):
{UsageMode === 'Read' ?
<div className='Table ScheduleGrid'>
<div>{schedule.id}</div>
<div>{schedule.interval}</div>
<div>{schedule.project_id}</div>
<div>{schedule.database}</div>
<div>{schedule.create_timestamp}</div>
<div>{schedule.create_user_id}</div>
<div>
<EditIcon
style={{padding: '2px', width: '0.8em', height: '0.8em', marginRight: '5px'}}
className='CircleButton'
onClick={onEditScheduleClick}
/>
</div>
</div>
:
<div>ID</div>
}
I am new in react and I am using select tag to select answers to questions and this select tag changes based on the number of questions which can modify too ..
I want to save the selection of each answer with its question .. I hope someone can help me in this :
<Card>
<Card.Header>
<Card.Title as='h5'>
Select questions and their answer to create the decision tree
</Card.Title>
</Card.Header>
<Card.Body>
{ Object.entries(this.state.liste).map(([ke,values]) => {
return (
<div className="row ">
<div className="col-xl-11">
<h6 className="align-items-center float-left">{ke}</h6>
<div className="progress-bar progress-c-theme" role="progressbar" style={{width: '0%'}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"/>
<div className="text-right">
<div className="col-md-11" style={{ width: '130px', height: '20px', top: '-20px', right: '-400px' }}>
<select name = "secondSelectt" onChange={this.handleChange}>
{Object.values(values).map(key=>{
return (
<option id={key}>{key}</option>
);
})}
</select>
</div>
</div>
<div className="progress m-t-30 m-b-20" style={{height: '1px'}}>
<div className="progress-bar progress-c-theme" role="progressbar" style={{width: '0%'}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"/>
</div>
</div>
</div>
)})
}
</Card.Body>
</Card>
You need to add value to your options. And a default value to your select. that will come from your states. (handleChange) will update this state.
this.state = {
secondSelectt: '',
liste: [1,2,3,4,5],
}
handleChange({target: { name, value }}) {
this.setState({
[name]: value
});
}
Your new code.
<Card>
<Card.Header>
<Card.Title as='h5'>Select questions and their answer to create the decision tree</Card.Title>
</Card.Header>
<Card.Body>
{this.state.liste.map(number => {
return (
<div className="row ">
<div className="col-xl-11">
<h6 className="align-items-center float-left">{ke}</h6>
<div className="progress-bar progress-c-theme" role="progressbar"
style={{ width: '0%' }} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
<div className="text-right">
<div className="col-md-11" style={{ width: '130px', height: '20px', top: '-20px', right: '-400px' }}>
<select name="secondSelectt" value={this.state.selectedValue} onChange={(event) => this.handleChange(event)}>
{Object.values(values).map(key => { return (<option key={key} value={key}>{key}</option>) })}
</select>
</div>
</div>
<div className="progress m-t-30 m-b-20" style={{ height: '1px' }}>
<div className="progress-bar progress-c-theme" role="progressbar"
style={{ width: '0%' }} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
</div>
</div>
</div>)
})
}
</Card.Body>
</Card>
This is the specific change I've made.
this.state = {
liste: [1,2,3,4,5]
}
<select
name="secondSelectt"
value={this.state.selectedValue}
onChange={(event) => this.handleChange(event)}
>
{liste.map(number => <option key={number} value={number}>{number}</option>)}
</select>
I need to add link to my logo image.I mean when ever I click my logo image it should redirect to dashboard page.I tried to do it using anchor tag but it is not working properly
<Header className='header' style={{ position: 'fixed', width: '100%' }}>
<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
{collapsed &&
<a href="/dashboard">
<img src={minLogo} alt='Logo' />
</a>
}
{ !collapsed &&
<span> </span>
}
</div>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggleSideBar}
/>
<div style={{ display: 'inline-block', float: 'right' }}>
<Dropdown overlay={menu} placement="bottomRight">
<Avatar icon='user' />
</Dropdown>
</div>
</Header>
Try this
import { Link } from "react-router-dom";
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
User router Link instead of anchor:
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>