Line 18:19: 'value' is missing in props validation - reactjs

I have this register page and it keeps showing me this error "Line 18:19:'value' is missing in props validation":
const Register = () =>{
const [value, setMyValue] = useState()
This function shows up a component based on the choice of the user that happens in the select tag
const Choice = ({ value }) =>{
if (value === "true"){
return <Employee />
}else{
return <Employer />
}
}
return(
<div>
<Navbar />
<div className="container-xxl bg-primary page-header">
<div className="container text-center">
<h1 className="text-white animated zoomIn">Sign Up</h1>
<nav aria-label="breadcrumb">
</nav>
</div>
</div>
<div className="container-xxl py-5" id="contact">
<div className="container">
<div className="mx-auto text-center wow fadeInUp" data-wow-delay="0.1s" style=
{{maxWidth: 600}}>
<div className="d-inline-block border rounded-pill text-primary px-4 mb-2">Sign Up
As</div>
<select onChange={(e)=>{setMyValue(e.target.value)}} className="form-select" aria-
label="Default select example">
<option value="false">Employer</option>
<option value="true">Employee</option>
</select>
<h2 className="mb-5 mt-4">Sign Up to find the best employees</h2>
</div>
<div>
<Choice value={ value } />
</div>
</div>
</div>
</div>
)
}
And this is the line 18 by the way:
const Choice = ({ value }) =>{

Maybe the problem could be 2 brackets in line 7?
if (value === "true"){
return <Employee />
}else{
return <Employer />
}

Related

Component Rerendering On Change NextJS

I have a simple input with an onchange function that takes the value and sets the state for whichever one I want. I have used an input onChange before in other parts of the code, but this issue has never happened before. Every time I would type in a number in the input, it deselects the input and doesn't let me input anymore. This is the code for the input including the state set;=
const [calc, setCalc] = useState("");
const [iotInitial, setIotInitial] = useState(0);
const [iotCont, setIotCont] = useState(0);
const [iotGrowth, setIotGrowth] = useState(0);
const [iotSubmit, setIotSubmit] = useState(false)
const Calculator = () => {
if (calc === "1") {
return (
<div className="text-black p-2">
<h1 className="text-lg">Investment Over Time</h1>
<div className="">
<div className="flex flex-wrap gap-x-5">
<div className="flex flex-col">
<label>Initial Investment</label>
<input defaultValue={iotInitial} value="initial" type="number" className="rounded" onChange={(e) => setIotInitial(e.target.value)}/>
</div>
<div className="flex flex-col">
<label>Contributions (monthly)</label>
<input defaultValue={iotCont} value="cont" type="number" className="rounded" onChange={(e) => setIotCont(e.target.value)}/>
</div>
<div className="flex flex-col">
<label>Growth Time (years)</label>
<input defaultValue={iotGrowth} value="growth" type="number" className="rounded" onChange={(e) => setIotGrowth(e.target.value)}/>
</div>
<button className="bg-blue-300 hover:bg-blue-500 px-5 rounded" onClick={() => {setIotSubmit(true)}}>
Submit
</button>
</div>
{iotSubmit &&
<div>
{iotInitial}
{iotCont}
{iotGrowth}
</div>
}
</div>
</div>
);
} else if (calc === "2") {
return (
<div className="text-black p-2">
<h1 className="text-lg">Risk Analysis Using Average True Range</h1>
<p>Coming Soon</p>
</div>
);
} else if (calc === "3") {
return (
<div className="text-black">
<h1 className="text-lg">Hello</h1>
<p>{calc}</p>
</div>
);
}
};
This component keep rerendering and I don't know why. Any help would be useful.
you use value="initial" which is a string and what you should do is
...
<input
defaultValue="0"
value={iotCont}
type="number"
onChange={(e) => setIotCont(e.target.value)}
/>
...
The problem is that input uses value attribute as what it is gonna display
or you may simply remove value from your input to make it one way binding

how set Scroll to the top of the page after page change?

I have a problem, which I have no idea about. when the user changes the page the user stays at the bottom of the page. I want to take the user to the top of the page. I use to navigate by Id but it's not working. How can I solve this?
const handleSelect = (e) => {
navigate('#manageItem')
setLimit(e.target.value)
}
return (
<div id='manageItem' div className='container mx-auto' >
<PageTitle title={'Manage items-Laptop Stockroom'} />
{isLoading ? <Spinner /> : <div className='grid grid-cols-1 gap-16 mt-16 md:grid-cols-3 p-4'>
{
products.map(laptop => <SingleProduct
key={laptop._id}
laptop={laptop}
/>
)
}
</div>}
<div className='flex justify-center gap-2 my-12 items-center'>
<div className='flex gap-2'>
{
[...Array(page).keys()].map(number => <>
<button
onClick={() => setActive(number)}
key={number}
className={`border-2 p-1 border-blue-500 font-semibold ${active === number ? 'bg-blue-500' : ''}`}
> {number + 1}</button>
</>)
}
</div>
<div>
<select onChange={handleSelect}>
<option value="6">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>
</div>
</div>
</div >
);
};
export default ManageItems;
you can do smth simple like
const scrollToTop = () => {
window.scrollTo(0, 0);
}

How can I display my data dynamically onclick event in React

I'm creating a movies app with React and Redux, in each movie card I have some information about the movie like the title, image, and a button(buy a ticket). The idea is when I click on the button of each card I want to get the same image and title of the card and display it on the same page on another card that going to pop up so the user can choose the quantity and continue.
How can I get the data from the movie card onclick and transform it to another card as a pop-up?
what do you think
Single movie card Component
const SingleMovieCard = ({ id, title, poster_path, overview, toggleHandler }) => {
const [selected, isSelected] = useState(null);
return (
<article key={id} className="card">
<div key={id} onMouseEnter={() => isSelected(id)} onMouseLeave={() => isSelected(null)}>
<img src={`${ImgPath}` + poster_path} alt={title} className="image" />
{selected === id && <video src="./Trailers/SpaceJam.mp4" autoPlay={true} loop muted />}
</div>
<div className="body-card">
<h1>{title}</h1>
<p>{`${overview.substring(0, 200)}...`}</p>
</div>
<div className="services">
<FiShare2 className="icon" />
<FiHeart className="icon" />
<div className="btn-icon-container">
<BiShoppingBag className="btn-icon" />
<button onClick={() => toggleHandler()}>Buy Ticket</button>
</div>
</div>
</article>
)
}
export default SingleMovieCard;
Pop-up movie card
const PopUpMovie = ({showClass, toggleHandler}) => {
const moviesList = useSelector((state)=> state.allMovies.movies);
return (
<div className={`pop-up-container ${showClass}`}>
<nav className="pop-up">
<GrClose className="pop-up-close" onClick={()=> toggleHandler()}/>
<div className="product-details">
<div className="img-container">
<img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
</div>
<div className="product info">
<h1 className="title">Free Guy movie</h1>
<div className="quantity">
<h4>Quantity</h4>
<span>4</span>
</div>
<h5 className="prix">11$</h5>
<button className="btn-checkout">Continue to checkout</button>
</div>
</div>
</nav>}
</div>
)
}
export default PopUpMovie;
you can use Modal from react-bootstrap
Example:
import { Modal } from "react-bootstrap";
const PopUpMovie = ({ showClass, toggleHandler }) => {
const modalContent = (
<div className={`pop-up-container ${showClass}`}>
<nav className="pop-up">
<GrClose className="pop-up-close" onClick={() => toggleHandler()} />
<div className="product-details">
<div className="img-container">
<img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
</div>
<div className="product info">
<h1 className="title">Free Guy movie</h1>
<div className="quantity">
<h4>Quantity</h4>
<span>4</span>
</div>
<h5 className="prix">11$</h5>
<button className="btn-checkout">Continue to checkout</button>
</div>
</div>
</nav>
</div>
)
const moviesList = useSelector((state) => state.allMovies.movies);
return (
<Modal
id="order-modal-close"
backdrop="static"
show={showClass}
size={"md"}
dialogClassName="modal-90w"
onHide={toggleHandler}
>
<Modal.Header closeButton>
<Modal.Title>Movie</Modal.Title>
</Modal.Header>
<Modal.Body >{modalContent}</Modal.Body>
{modalFooter}
</Modal>
)
}

Data lost in switch case reactjs

I send data to another file with this:
import TropheeNameBlock from "../media-components/trophee-name-block"
<TropheeNameBlock currentUser={currentUser} userGender={userGender} />
I receive data from another file on the variable currentUser and userGender
I use a switch case to display an icon.
I have put a console.log(currentUser) the variable currentUser contain a Json like this:
{
"id":"4a1d-aeeb-a54ede02e90c",
"firstName":"MyFirstname",
"lastName":"MyLastname",
"gender":0,
"birthDate":"2021-08-05T15:43:00+02:00",
"phone":"000000",
"email":"myemail#mail.com",
"optin":true,
"language":"en-EN",
"country":"EN",
"streetName":"myStreetName",
"houseNumber":"",
"houseNumberExt":null,
"postalCode":"",
"city":"",
"idlsm":null,
"cars":[
"/cars/3854f416b36c",
"/cars/901cf0124e39"
],
"status":1,
"countOfUserReward":0,
"countOfEmailToRead":1,
"subscriptionDate":"2021-08-05T15:43:00+02:00",
"deletionDate":null,
"validationDate":"2021-08-05T17:15:55+02:00",
"lastUpdateDate":null,
"newPasswordRequestAt":"2021-08-05T17:15:55+02:00",
"newPasswordRequestToken":"TOKEN",
"events":[
"/car_events/b1ae-dbc2558f83c0",
"/car_events/802a-0d869bb7422d"
],
"carRemoveHistories":[
],
"rewards":[
],
"dealer":"4682-9223-df3cf582a883",
"particleName":"",
"reminderChannelNotification":false,
"reminderChannelSMS":false,
"reminderChannelEmail":true,
"offerChannelNotification":false,
"offerChannelSMS":true,
"offerChannelEmail":false,
"welcomeTimeline":true,
"welcomeRewards":true,
"contacts":[
],
"nissanCards":[
],
"source":"dealer_platform",
"medium":null,
"campaign":null,
"boardingFinishDate":null,
"rewardsAccessEndDate":null,
"scheduledDeletionDate":null,
"exportedToLsm":false,
"oldDealer":0,
"onboardedBy":"Onboarder",
"licencePlate":"ABC123"
}
My code with the switch case is like this:
import React from "react"
import {useTranslation} from 'react-i18next';
const TropheeNameBlock = ({currentUser, userGender}) => {
const {t} = useTranslation();
return(
<>
{(() => {
switch (currentUser.status) {
case 1:
return (<span className="icon-win icon-win-text"><span className="path1"></span><span className="path2"></span><span className="path3"></span><span className="text">{t('generic.status_level.' + currentUser.status)}</span></span>);
case 2:
return (<span className="icon-win icon-win-text silver"><span className="path1"></span><span className="path2"></span><span className="path3"></span><span className="text">{t('generic.status_level.' + currentUser.status)}</span></span>);
case 3:
return (<span className="icon-win icon-win-text gold"><span className="path1"></span><span className="path2"></span><span className="path3"></span><span className="text">{t('generic.status_level.' + currentUser.status)}</span></span>);
case 4:
return (<span className="icon-win icon-win-text platinum"><span className="path1"></span><span className="path2"></span><span className="path3"></span><span className="text">{t('generic.status_level.' + currentUser.status)}</span></span>);
}
})()}
<h3 className="pt-3 mb-2">{userGender} {currentUser.lastName}</h3>
</>
)
}
export default TropheeNameBlock
In my Json I would like to access in my field status.
In this case when I do a currentUser.status the variable are empty.
I have try to use a console.log(currentUser.status) inside the switch case like this:
switch (currentUser.status) {
case 1:
console.log(currentUser.status);
return (<span className="icon-win icon-win-text"><span className="path1"></span><span className="path2"></span><span className="path3"></span><span className="text">{t('generic.status_level.' + currentUser.status)}</span></span>);
But the console log is not display on the console because I think it don't enter to the switch case.
The main file:
The call API to get currentUser:
useEffect(() => {
UserService.getMeUserId({
"id": user.id,
"token": localStorage.getItem('token')
}).then( (resUser) => {
localStorage.setItem('currentUser', JSON.stringify(resUser.data.user));
setCurrentUser(localStorage.getItem('currentUser'));
})
)}
Here the code where I call the file TropheeNameBlock
const content = () => {
return(
<div class="row p-4">
<div class='col-md-12'>
<div class='p-2'>
{t('Back to client list')}
</div>
</div>
<div className="col-lg-4 d-none d-lg-block p-4 without-arrow">
<div className="status-container status-bronze white-container py-3 px-3 mb-3">
<TropheeNameBlock currentUser={currentUser} userGender={userGender} />
<hr />
<h3 className="mb-2">{t('my_profil.rewards_history')}</h3>
<RewardBlock currentUser={currentUser} />
</div>
<h3 className="text-uppercase">{t('my_profil.my_dealer.title')}</h3>
<div className="white-container py-2 px-3 mb-3">
<ul className="list-link-picto">
<li className="mb-0 py-3 w-100"><a to="/profile/my-dealer" state={{id: currentDealer.id}} className="my-dealer"><span className="icon-dealer-favorite icon"></span><h3 className="mb-0">{currentDealer.name}</h3></a></li>
</ul>
</div>
<h3 className="text-uppercase">{t('my_profil.my_vehicles')}</h3>
<div className="white-container py-0 px-3 mb-3">
<ul className="list-link-picto">
{ getCarsMedia()}
</ul>
</div>
</div>
<div class="col-lg-8 p-4">
<div className="white-container">
<h1 className="text-uppercase with-border-top with-border-bottom fs-20">{t('timeline.title')}</h1>
<p>{t('timeline.description')}</p>
<div className="d-flex align-items-center justify-content-between">
{getCars()}
</div>
<hr className="mt-2" />
{getEvents()}
</div>
</div>
</div>
)
};
let userGender = '';
if(currentUser) {
userGender = t('generic.forms.form_options.user_title.'+ currentUser.gender);
}
return(
<div className="wrapper">
<div className="container">
<main>
<header className="header py-2">
<div className="container d-flex align-items-center">
<img src={logoNissanNow} alt="Nissan Now" width="160" className="mr-auto"/>
<span className="dark-red cursor-pointer" onClick={() => logout()}><span
className="icon-logout-2 icon align-middle"></span>{t('Logout')}</span>
</div>
</header>
<BodyClass name="large-wrapper" />
{content()}
</main>
<footer className="d-flex justify-content-around d-md-block text-center footer">
{/* <Link to="#" className="mx-md-4" onClick={(e) => toggleModale(e)}>{intl.formatMessage({id: "footer.terms"})}</Link> */}
</footer>
</div>
</div>
)
};
Do you know why the data on currentUser are lost inside the switch case ?
Thanks you
I have found the solution.
I needed to use Json.Parse because I have stringify my data before
setCurrentUser(JSON.parse(localStorage.getItem('currentUser')));

How to open one dropdown item?

friends, I have array of questions, and a dropdown list for them... i want to open any question, but all questions are opening together... please help
const FAQ = () => {
const [isOpenAnswer, setIsOpenAnswer] = useState(false)
const toggle = (id) => {
questions.forEach((q) => {
if(q.id === id){
setIsOpenAnswer((prevState) => !prevState)
}
})
}
return <Layout>
<div className="questionsBox pb-5">
<h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
{questions.map((q, index) => {
return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
<div className="d-flex justify-content-between">
<span className="questionTitle">{q.question}</span>
<img className="questionIcon"
src={Plus} alt="plus"
onClick={() => toggle(q.id)}
/>
</div>
{isOpenAnswer && <p className="answer pt-2 pb-2">
{q.answer}
{q.source}
</p>}
</div>
})}
</div>
</Layout>
}
Use a Javascript object to track which unique q.id is being set to true.
const FAQ = () => {
const [isOpenAnswer, setIsOpenAnswer] = useState({})
const toggle = (id) => {
setIsOpenAnswer(prevState => ({
...prevState,
[id]: !prevState[id],
});
}
return <Layout>
<div className="questionsBox pb-5">
<h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
{questions.map((q, index) => {
return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
<div className="d-flex justify-content-between">
<span className="questionTitle">{q.question}</span>
<img className="questionIcon"
src={Plus} alt="plus"
onClick={() => toggle(q.id)}
/>
</div>
{isOpenAnswer[q.id] && <p className="answer pt-2 pb-2">
{q.answer}
{q.source}
</p>}
</div>
})}
</div>
</Layout>
}
You're using the same prop for all of them here:
{isOpenAnswer && <p className="answer pt-2 pb-2">
{q.answer}
{q.source}
</p>}
Try saving something unique in state to identify what you're supposed to be showing, e.g.,
{selectedQuestionId && /* the rest */ }
and set the selectedQuestionId where you're currently setting isOpenAnswer .

Resources