How to store selected values in useState

Question

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;

score 0 · Answer 1 · answered Aug 31 '22 at 09:11

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

I have followed your guide but it is still not storing the selected values, any further guidance will be highly appreciated — Sebastian Kiamba, Aug 31 '22 at 09:34
if you have multi setp form and each step is a component,and you want each component share common state ? then i will say , you will need to go with redux or react context api ,because useState create local state which is not available to other components — Jatin Parmar, Aug 31 '22 at 10:29
I played with all the suggestions here and I finally resolved my issue. Thank you everyone — Sebastian Kiamba, Sep 05 '22 at 06:41

c9der · Answer 2 · 2022-08-31T09:22:57.180

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))}/>

score 0 · Answer 3 · answered Aug 31 '22 at 09:18

0

Please checkout this question:

It was already answered here:

React JSX: selecting "selected" on selected <select> option

answered Aug 31 '22 at 09:18

Fasunle Kehinde Hussein

17
1
2

How to store selected values in useState

3 Answers3