We Keep Coding

Input State not updating correctly - React

Every time I update the text of the input, it doesn't update. When i update the text a second time, the state updates to the text of the first update. I'm not sure what exactly is happening but I suspect it's a deep/shallow copy error I'm not seeing? Any help would be appreciated
const DropDownPrompt = (props) => {
//set type by passing hook through props
const [dropDownOptions, setDDoptions] = useState([{id : 1 , value : "Value 1"},{id : 2 , value : "Value 2"}]);
return (
<div className="mb-0 p-3">
<Row>
<Col>
<FormGroup>
<Label htmlFor="exampleSelect" style={{fontWeight : "bold"}}>Preview</Label>
<Input type="select" name="select" id="exampleSelect">
{dropDownOptions? dropDownOptions.map((ddO) =>
<option>{ddO.value}</option>
):null}
</Input>
</FormGroup>
</Col>
<Col>
<Label style={{fontWeight : "bold"}} >Options (at least 2)</Label>
{dropDownOptions? dropDownOptions.map((ddO, index) =>
<Row>
<FormGroup>
<Label check >
<Input key = {index } type="text" value = {ddO.value} bsSize="sm" onChange= { async (e) =>{
let carrier = [...dropDownOptions]
carrier[ddO.id - 1] = {...carrier[ddO.id - 1], value : e.target.value }
setDDoptions(carrier)
console.log(dropDownOptions)
}} />
</Label>
{ddO.id > 2 ?
<Button className="btn-wrapper--icon ml-2 btn-link btn-sm" >
<FontAwesomeIcon icon={['fas', 'minus-circle']} className="font-size-lg text-danger" />
</Button>:null}
</FormGroup>
</Row>
):null}
<Button className="btn-link" onClick = {() => {setDDoptions ([...dropDownOptions, {id : dropDownOptions.length + 1, value : `Value ${dropDownOptions.length + 1}`}])}} >
<span className="btn-wrapper--icon">
<FontAwesomeIcon icon={['fas', 'plus-circle']} className="font-size-lg" />
</span>
<span className="btn-wrapper--label">
Add another
</span> </Button>
</Col>
</Row>
</div>
)
}
export default (DropDownPrompt)

when I try to type something in the form field, It doesn't let me type anything

I need to do a form in react.js but when I try to type something in the form field, It doesn't let me type anything. I create a function for the input e my form. what am i doing wrong? please help me. thanks.
renderInput(title, value, onChange, validateField, placeholder) {
return (
<div className="col-12 col-md-4">
<div className="form-groud">
<label>{title}</label>
<input type="text" className="form-control"
name={title}
value={value}
onChange={e => onChange(e)}
onBlur={validateField}
placeholder={placeholder} />
</div>
</div>
)
}
renderForm() {
return (
<div className="form">
<div className="row">
{this.renderInput("Avatar", this.state.member.avatar, e => this.updateField(e), this.validateField, "profile picture" )}
{this.renderInput("Name", this.state.member.name, e => this.updateField(e), this.validateField, "name" )}
{this.renderInput("Email", this.state.member.email, e => this.updateField(e), this.validateField, "email" )}
{this.renderInput("Project", this.state.member.project, e => this.updateField(e), this.validateField, "project" )}
{this.renderInput("Devices", this.state.member.devices, e => this.updateField(e), this.validateField, "devices" )}
{this.renderInput("MainStack", this.state.member.mainstack, e => this.updateField(e), this.validateField,"main stack" )}
</div>
<hr />
<div className="row">
<div className="col-12 d-flex justify-content-end">
<button className="btn btn-primary"
onClick={e => this.save(e)}>
Save
</button>
<button className="btn btn-secondary ml-2"
onClick={e => this.clear(e)}>
Cancel
</button>
</div>
</div>
</div>
)
}
My updateField method:
updateField (event) {
const member = {...this.state.member}
member[event.target.avatar] = event.target.value
member[event.target.name] = event.target.value
member[event.target.project] = event.target.value
member[event.target.devices] = event.target.value
member[event.target.mainstack] = event.target.value
this.setState({ member })
}

you should controll input form value's using react state, in React is called a “controlled component”. So check your updateField function and make sure that it change the state value.
https://reactjs.org/docs/forms.html

How do I get the value from Form.Control in React Bootstrap?

Here is my code :
<Modal centered size="lg" show={showAlertModal} onHide={handleCloseAlertModal}>
<Modal.Header>
<Modal.Title>{dpAlert !== null && dpAlert.id !== null ? `Alert #${dpAlert.id} - Editing` : `New Alert`}</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Form.Group controlId="language">
<Form.Label>Language</Form.Label>
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
<Form.Text className="text-muted">
This is used for internal reference only, not shown to the public
</Form.Text>
</Form.Group>
<hr />
<b>Preview:</b>
{getAlertPreview(dpAlert)}
</Modal.Body>
<Modal.Footer>
<Button type="reset" variant="danger" size="lg" onClick={handleCloseAlertModal}>
Close
</Button>
<Button type="submit" variant="primary" size="lg" onClick={handleSubmit} form="newAlert">
Save
</Button>
</Modal.Footer>
</Form>
</Modal>
I am trying to get the value from
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
and I have tried the onChange to set the value in a state but it's not working? Any help is appreciated thank you

You can get with event.target.value
const setInputLanguage = event => {
console.log(event.target.value);
}
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
OR
<Form.Control id='inputL' onChange={event => console.log(event.target.value)} type="text" placeholder="Language" required />

Formik lost fields when trigger a modal confirm

I have a form using Formik library, all are right but when i want to confirm and submit i need to pass first a modal, the problem is when i launch the confirm modal all data i put in the form are eliminate and nothing is send, i noticed when the i launch the modal, the form tag are upload and then lost the data, someone has the same problem ? o are something to prevent the form tag upload when change the state of the modal ?
here is part of my code, i use CSSTransition on the modal, that mount and unmount the component, and i call previous fields on the form using FieldArray
<Formik
enableReinitialize
initialValues={INITIAL_VALUES}
onSubmit={(values) => {
this.props.onSubmitForm(values.rows);
}}
>
{({ values, errors, touched, isValid }) => (
<Form>
<Title />
<div className="wrapper__brick wrapper__brick--to-up">
<FieldArray
name="rows"
render={({ push }) => (
<>
<div className="wrapper__block">
<div className="master-table">
<FieldArray
name="rows"
render={({ remove }) => (
<div className="master-table__container">
{values.rows.length > 0 &&
values.rows.map((rows, index) => (
<div
className="master-table__row"
key={index}
>
<div className="master-table__item">
<Field
className={errors.rows && errors.rows[index] && touched.rows && touched.rows[index] ?
'input input--empty is-danger'
:
'input input--empty'
}
name={`rows.${index}.name`}
placeholder="Name"
type="text"
validate={validateName}
/>
<ErrorMessage
name={`rows.${index}.name`}
component="p"
className="help is-danger"
/>
</div>
<div className="master-table__item">
<div className={rows.default ? 'select select--disabled' : 'select select--empty'}>
<Field
as="select"
disabled={rows.default}
name={`rows.${index}.kind`}
>
{this.allowedKinds.map((row) => (
<option
value={row.internal}
key={row.internal}
>
{row.name}
</option>
))}
</Field>
</div>
</div>
<div className="master-table__item">
<button
className="button button--trigger tooltip is-tooltip-right"
data-tooltip={rows.default ? t('common.deleteNotAvailable') : t('common.delete')}
onClick={() => remove(index)}
type="button"
disabled={rows.default}
>
<span className="icon">
<i className="far fa-trash-alt" />
</span>
</button>
</div>
</div>
))}
</div>
)}
/>
</div>
</div>
<Footer
onAddRow={() => push({
id: UUID.v4(),
name: '',
kind: 'string',
type: 'generic',
required: false,
default: false
})}
validForm={!isValid}
/>
<TransitionWrapper stateToggle={this.state.openModal}>
<ModalDialog
iconModal="fas fa-info-circle"
titleText={t('modals.descriptionContinue')}
onCloseMethod={this.handleShowModal}
onAcceptMethod={this.props.onSubmitForm}
/>
</TransitionWrapper>
</>
)}
/>
</div>
</Form>
)}
</Formik>

React useState and map()

I'm trying to make an comment input from map,
but since I use the same useState all the input fields get changed.
How can I target a specific input?
return (
<div>
{posts.map(post => (
<div key={post.id}>
<img
src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
alt={`${post.id}`}
/>
<p>{post.description}</p>
<span>{post.likes ? post.likes : 0}</span>
<button onClick={() => like(post.id)}>Like</button>
<Link to={`/post/${post.id}`}>Edit</Link>
<button onClick={() => deletePost(post.id)}>Delete</button>
<form onSubmit={uploadComment}>
<input
type="text"
onChange={handleComment}
value={comment}
placeholder="Comment"
/>
</form>
</div>
))}
</div>
)

You have an own state per rendered post, which means that it is a use case for an own component:
function Post(post, deletePost) {
const [comment, setComment] = useState('');
const uploadComment = () => {}; // your code is missing
return (
<div key={post.id}>
<img
src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
alt={`${post.id}`}
/>
<p>{post.description}</p>
<span>{post.likes ? post.likes : 0}</span>
<button onClick={() => like(post.id)}>Like</button>
<Link to={`/post/${post.id}`}>Edit</Link>
<button onClick={() => deletePost(post.id)}>Delete</button>
<form onSubmit={uploadComment}>
<input
type="text"
onChange={e => setComment(e.target.value)}
value={comment}
placeholder="Comment"
/>
</form>
</div>
)
}
Then your render function would look like this:
return (
<div>
{posts.map(post => <Post post={post} deletePost={deletePost} />)}
</div>
)

Consider using react useState hook per input.