optgroup label is repeating on droplist
this is the dropdown
<Input
id="period"
name="period"
type="select"
required
onChange={handleChange}>
<option disabled selected>
Please Select
</option>
{periodLists.map((item) => (
<optgroup label={item.period_category}>
<option
key={item.id}
value={item.period_name}>
{item.period_name}
</option>
</optgroup>
))}
</Input>
this the data
I need display the droplist like this
You are creating a separate optgroup for each item.
You need to have two nested loops, an outer loop for the groups and an inner loop for the items.
<Input
id="period"
name="period"
type="select"
required
onChange={handleChange}>
<option disabled selected>
Please Select
</option>
{
[1, 2, 3].map((category) => (
<optgroup label={category}>
{
periodLists.map.map((item) => (
<option
key={item.id}
value={item.period_name}>
{item.period_name}
</option>
))
}
</optgroup>
))
}
</Input>
Related
I'm new in this coding world. Can you help me please ?
I have this select element with a for loop:
{servicerate.map(dep=>
<select name="Country" className="form-select" aria-label="Default select example">
<option selected>Select the Country</option>
for (let servicerateid in servicerateid)
{
<option value="{servicerateID}" onChange={this.updateCountryChoice}> {dep.country} </option>
}
</select>
)}
enter image description here
and I'm getting this:
enter image description here
Anyone please ?
This should be obvious to you guys, but for me it's being complicated.
Thanks
I tried several ways to do the for loop but without success
Here is the code:
{servicerate.map(dep=>
<select value="{servicerateID}" onChange={this.updateCountryChoice} name="Country" className="form-select" aria-label="Default select example">
<option selected>Select the Country</option>
for (let servicerateid in servicerateid)
{
<option> {dep.country} </option>
}
</select>
)}
I am a beginner at React JS. I would like to learn how to store selected values in useState.
The form containts four different drop downs and I want to store this selected values in useState so that at the end of the multi step form, user can go back to edit the fields before sub.
import React, {useState} from 'react';
import './paperdetails.css';
import IncDecCounter from './IncDecCounter'
import {
Text
} from '#chakra-ui/react';
const PaperDetails = () => {
const [selected, setSelected] = useState();
return (
<div className='paper-details'>
<div className='paper-details_display_flex'>
<div className='left'>
<div className='left-calc_wrapper'>
<div>
<label>Type of Paper</label>
<select>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
</div>
<div>
<label>Study Level</label>
<select>
<option value="school">Bachelor</option>
<option value="college">College</option>
<option selected value="Bachelor">School</option>
<option value="Masters">Masters</option>
</select>
</div>
</div>
<div className='left_middle'>
<div className='calc-control'>
<label>Number of Pages</label>
<IncDecCounter />
</div>
<div className="select-deadline">
<label>Deadline</label>
<select className='deadline' value={selected} onChange={e=>setSelected(e.target.value)}>
<option value="1 hour">1 hour</option>
<option value="3 hours">3 hours</option>
<option selected value="8 hours">8 hours</option>
<option value="12 hours">12 hours</option>
<option value="24 hours">24 hours</option>
<option value="48 hours">48 hours</option>
<option selected value="3 days">3 days</option>
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option selected value="14 days">14 days</option>
</select>
<span color={'#785aec'} fontSize={'14px'}
fontWeight={'bold'}> Will be ready in: {selected}
</span>
</div>
</div>
<section className="writing-instructions">
<div className="writing_instructions">
<div className="d-flex">
<label className='instructions'>
Writing instructions
<span className='text-orange'> *required</span>
</label>
<input className="input-file" id="my-file" type="file"
accept="application/pdf,application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
<label tabindex="0" for="my-file" className="input-file-trigger">
<span className='span--underlinel-blue'> Upload writing Instructions</span>
</label>
</div>
<div className='text-area'>
<textarea className='text-area_main'
placeholder='Type your instructions here. Please provide as many details as possible.'></textarea>
</div>
</div>
</section>
</div>
<div className='right'>
<div className='total-row'>
<div className='total-text'>
<h1 className='total-text_h1'>Total:</h1>
<span className='span_price'>$0.00</span>
</div>
</div>
</div>
</div>
</div>
)
}
export default PaperDetails;
How to store multiple values in state
to do this ,you will need to define state for all four select box like this
const [seleccedValue1,setSelectedValue1]=useState(null);
const [seleccedValue2,setSelectedValue2]=useState(null);
const [seleccedValue3,setSelectedValue3]=useState(null);
const [seleccedValue4,setSelectedValue4]=useState(null);
then you will need to handle on change event of each select box like this
<select onChange={(e)=>{setSelectedValue1(e.target.value)}}>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
you can do the same for other select boxes as well
Please checkout this question:
It was already answered here:
React JSX: selecting "selected" on selected <select> option
Here is how you store value of any input field in useState();
const [selected,setSelected] = useState({});
function handleChange(event){
setSelected({...selected,[event.targe.id]=event.target.value});
}
return(
<select
id={"id_0"}
value={selected["id_0"]}
onChange={(event)=>(handleChange(event))}>
......."your code continue here"
and here is how you handle multiple input fields.
<select id={'id_1'} value={selected['id_1']}
onChange={(event)=>(handleChange(event))}/>
<select id={'id_2'} value={selected['id_2']}
onChange={(event)=>(handleChange(event))}/>
<button>
<select
onChange={(e) => {
const buttonItemCount = e.target.value;
const numButtonItemCount =
parseFloat(buttonItemCount);
onCartButtonChangeCount(x, numButtonItemCount);
}}
value={x.inCart}
>
<option value="default">{x.inCart}</option>
<option value="0">0 (Delete)</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</button>
// I would like the button to turn into a form/input if user clicks on option 10+ (here is example image) .
[button change from dropdown to form/input]
You will need to handle some kind of state inside your component to know if the value is greater or not than 10.
Also, remember that inputs get values as strings, so you will need to parse them into numbers.
Something like this would do:
export default function TestApp() {
const [selected, setSelected] = useState(null);
const handleChange = (e) => {
setSelected(e.target.value);
};
const parsedNumber = (v) => {
return parseInt(v) || null;
};
return (
<>
{parsedNumber(selected) < 10 ? (
<button>
<select onChange={handleChange}>
<option value="default"></option>
<option value="0">0 (Delete)</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</button>
) : (
<input onChange={handleChange} min={10} max={50} type="number"/>
)}
<button onClick={() => console.log(selected)}>Log current Value</button>
</>
);
}
const handleInputDropdownChange = (e) => {
//console.log(e.target.name + e.target.value);
state[e.target.name] = e.target.value;
};
<Field className="dropwdown" name="applicaiton_type" as="select" id="application_type" onChange={handleInputDropdownChange}>
<option value="">Select Application Type</option>
<optgroup label="app group 1">
<option value="1">App 1</option>
<option value="2">App2 2</option>
</optgroup>
<optgroup label="app group 2">
<option value="3">App 3</option>
<option value="4">App 4</option>
</optgroup>
</Field>
^^ Not Working ^^
When I attempt to select on the drop down, it doesn't display it how a onSelect would. But it stores it in the database correct even though it doesn't display it. How would I get both functionalities of onSelect and onChange?
VV Working VV
<Field className="dropwdown" name="vac_ban" as="select" id="vac_ban" onChange={handleInputDropdownChange}>
<option value="">Do you have a vac ban?</option>
<option value="true">Yes</option>
<option value="false">No</option>
</Field>
You need to set the state by calling the setState method. This will start the reconciliation cycle of react and will update the UI as expected by you.
const handleInputDropdownChange = (e) => {
setState((state)=>{
state[e.target.name] = e.target.value;
})
};
<Field className="dropwdown" name="applicaiton_type" as="select" id="application_type" onChange={handleInputDropdownChange}>
<option value="">Select Application Type</option>
<optgroup label="app group 1">
<option value="1">App 1</option>
<option value="2">App2 2</option>
</optgroup>
<optgroup label="app group 2">
<option value="3">App 3</option>
<option value="4">App 4</option>
</optgroup>
</Field>
Can I use multiple selection with React.createref()? It returns undefined.
<div>
<label>
Pilih Skill :{" "}
<select multiple ref={this.inputSkill}>
<option value="Front-end" key="1">Front-end</option>
<option value="Back-end" key="2">Back-end</option>
<option value="Dev-Ops" key="13">Dev-Ops</option>
<option value="Full Stack" key="41">Full Stack</option>
</select>
</label>
</div>