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