Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

172
Views
add dynamic useState

I see this link but didn't get any answer for my question

in my component , I have a two selectbox and one txtarea that owned Specified state(define by use state).

so on click add button this form create again and again, my question is how to define new state dynamicly to set it for new selectbox that dynamicly created. my select box use react-select and code of them is here :

      <div className="mqContainer">
        {[...Array(mqCount)].map((x, i) => (
          <div key={i} className="newMqWrapper mt-4">
            <Row className="mt-4">
              <Col xs={3}>
                <span>milestone</span>
              </Col>
              <Col xs={6}>
                <Select
                  style={{ width: "100px !important" }}
                  defaultValue={mileStoneType}
                  onChange={setmileStoneType}
                  options={MileStoneTypeOption}
                  isMulti={true}
                />{" "}
              </Col>
            </Row>
            <Row className="mt-4">
              <Col xs={3}>
                <span>question text</span>
              </Col>
              <Col xs={8}>
                <Form.Group>
                  <Form.Control
                    placeholder="why so serious?"
                    className=" dirrtl"
                    as="textarea"
                    rows={3}
                  />
                </Form.Group>{" "}
              </Col>
            </Row>
            <Row className="mt-4">
              <Col xs={3}>
                <span>answer type</span>
              </Col>
              <Col xs={6} className="mb-4">
                <Select
                  defaultValue={mileStoneAnswerType}
                  onChange={setmileStoneAnswerType}
                  options={MqAnswerTypeOption}
                />{" "}
              </Col>
            </Row>
          </div>
        ))}
        <Row>
          <Col xs={12} className=" mb-4 mt-4">
            <Button
              onClick={() => setMqCount(mqCount + 1)}
              style={{ width: "100%" }}
              variant="outline-secondary"
            >
              +
            </Button>{" "}
          </Col>
        </Row>
      </div>

enter image description here

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I hope that I understand your problem correctly.

Regularly, you would create a Component in which you can call useState() separately. After that, you can render it inside your map().

I tried to reproduce your structure:

import { useState } from 'react'

const Form = () => {
  const [ mqCount, setMqCount ] = useState(0)

  return (
    <div className='mqContainer'>
      {[ ...Array(mqCount) ].map((x, i) => {
        // TODO: pass your required props here
        return <Item key={i} />
      })}
      <Row>
        <Col className='mb-4 mt-4' xs={12}>
          <Button
            style={{ width: '100%' }}
            variant='outline-secondary'
            onClick={() => setMqCount(mqCount + 1)}
          >
            +
          </Button>{' '}
        </Col>
      </Row>
    </div>
  )
}

const Item = ({ mileStoneType, MileStoneTypeOption, setmileStoneType }) => {
  const [ yourState, setYourState ] = useState('Whatever you want')
  // TODO: replace it with your own state

  return (
    <div key={i} className='newMqWrapper mt-4'>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>milestone</span>
        </Col>
        <Col xs={6}>
          <Select
            isMulti
            defaultValue={mileStoneType}
            options={MileStoneTypeOption}
            style={{ width: '100px !important' }}
            onChange={setmileStoneType}
          />{' '}
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>question text</span>
        </Col>
        <Col xs={8}>
          <Form.Group>
            <Form.Control
              as='textarea'
              className=' dirrtl'
              placeholder='why so serious?'
              rows={3}
            />
          </Form.Group>{' '}
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>answer type</span>
        </Col>
        <Col className='mb-4' xs={6}>
          <Select
            defaultValue={mileStoneAnswerType}
            options={MqAnswerTypeOption}
            onChange={setmileStoneAnswerType}
          />{' '}
        </Col>
      </Row>
    </div>
  )
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!