Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

174
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda