We Keep Coding

Configurate Custome amount field

How to configurate custom amount field?
When I am trying to submit my own price, I have problem.
When I submit just one digit, I am getting empty value,
if I am submitting two digits or more, it seems last digit of amount is missing.
If I submit button, I am getting value. Buttons are ok.
let v = 0
const [price, setPrice] = useState(0)
const [yourPrice, setYourPrice] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
clickEvent()
console.log(price)
setYourPrice('')
}
function clickEvent (e, v){
if(v === 5 || v === 10 || v === 15) {
setPrice(v)
setYourPrice('')
} else {
return
}
}
const onChangeSuma = e => {
e.preventDefault()
setYourPrice(e.target.value)
setPrice(yourPrice)
}
here is form
<form onSubmit={handleSubmit}>
<div className="d-flex justify-content-between">
<button className={ `${price === 5 ?
'active' : 'noActive' }`}
onClick={e => clickEvent(e, 5)}>
$5
</button>
<button className={ `${price === 10 ?
'active' : 'noActive'}`}
onClick={e => clickEvent(e, 10)}>
$10
</button>
<button className={` ${price === 15 ?
'active' : 'noActive '}`}
onClick={e => clickEvent(e, 15)}>
$15
</button>
</div>
<div className="col text-center pt-1 fs-5 m-1 py-2 ">
<label>Your Price</label>
<input
type="number"
className={yourPrice ? 'active' : 'noActive'}
placeholder='$ Other'
id="inputID"
autoFocus={yourPrice}
value={yourPrice}
onChange={onChangeSuma}
/>
</div>
<button className='btn btn-secondary
border-0 rounded-0 py-2
w-100' type='submit'>SUBMIT</button>
</form>

When you do setState, it doesn't update the state immediately. You will get the updated state in the next re-render.
const onChangeSuma = (e) => {
e.preventDefault()
setYourPrice(e.target.value)
// setPrice(yourPrice)
// The following line changed
setPrice(e.target.value)
}

Edit User Details using React

I am stuck on editing user details and updating it.
What I'm trying to accomplish is when I click on "update" button, I can edit their name and email. And I can also delete the entry by clicking the "delete" button.
I have added the ability to add new User which I am able to code.
This is my code: https://codesandbox.io/s/zen-browser-5ifrel?file=/src/User.js
How do I add a if-else statement in my render so that IF i click on "update" button on one of the entry (e.g., id === selected.id), it will transform the "name" and "email" to textboxes to allow for edit. And 2 buttons for them to "confirm" their update or "cancel" their update.
render() {
return (
<div className="App">
{
this.state.users.map((u) => {
return (
<React.Fragment key={u._id}>
<div className="box">
<h3>{u.name}</h3>
<h4>{u.email}</h4>
<button onClick={() => {
this.beginEdit(u);
}}
>Update
</button>
<button onClick={() => {
this.deleteUser(u);
}}
>Delete
</button>
</div>
</React.Fragment>
);
})}
{this.renderAddUser()}
</div>
);
}

Use conditional rendering.
render() {
return (
<div className="App">
{
this.state.users.map((u) => {
return (
<React.Fragment key={u._id}>
<div className="box">
{u.isEditing ? (
<React.Fragment>
<input type="text" placeholder="name" />
<input type="text" placeholder="email" />
</React.Fragment>
) : (
<React.Fragment>
<h3>{u.name}</h3>
<h4>{u.email}</h4>
</React.Fragment>
)}
<button onClick={() => {
this.beginEdit(u);
}}
>Update
</button>
<button onClick={() => {
this.deleteUser(u);
}}
>Delete
</button>
</div>
</React.Fragment>
);
})}
{this.renderAddUser()}
</div>
);
}
You can probably figure out the rest.

you can use this that render output depends on the condition of (id === selectedUser.id)
state = {
selected = null;
}
render() {
return (
<div className="App">
{this.state.users.map((user) => {
return (
<div className="box" >
{selected?.id === user?._id ? (
<>
<input type="text" placeholder="name" defaultValue={user.name} />
<input type="text" placeholder="email" defaultValue={user.email} />
<button onClick={() => { this.handleCancel(user);}}>
Cancel
</button>
<button onClick={() => { this.handleConfirm(user);}}>
Confirm
</button>
</>
) : (
<>
<h3>{user.name}</h3>
<h4>{user.email}</h4>
<button onClick={() => { this.beginEdit(user);}}>
Update
</button>
<button onClick={() => { this.deleteUser(user);}}>
Delete
</button>
</>
)}
</div>
);
})}
{this.renderAddUser()}
</div>
);
}

Formik API : send different value in handleSubmit based on button click

I have the following code of a child component which is sending the form values to the parent when a user clicks .
Save and Continue button
Submit button
The Save and Continue button in the code is defined as follows:
<div className="form-field">
<Button size="large" variant="contained" color="primary" style={{marginLeft: '5px'}} type="submit">Save & Continue</Button>
</div>
When a user clicks Save and Continue button, I want to return requestStatuses: props.SimpleRequest && props.SimpleRequest.statusId || '10',.
However, when a user clicks the following Submit button:
<Button size="large" variant="contained" color="primary"
type="submit">Submit</Button>
I want to return props.SimpleRequest && props.SimpleRequest.statusId || '6',.
The default value for Status is 6 when a user interacts with the form and the dropdown is disabled so user can't change it. However, I want to send different values of it as I explained above based on different button clicks. Is it possible?
Minimal Code with relavent Formik form information is below:
const SimpleRequestForm = (props) => {
const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} =
props;
const growl = React.createRef()
return (
<div>
<div id="formDiv">
<Growl ref={growl}/>
<Form className="form-column-3">
<div className="SimpleRequest-form">
<div className="form-field">
<CustomSelectField name="requestStatuses" disabled type="select" placeholder="Status"/>
</div>
<div className="form-field">
<CustomSelectField name="requestPrioritieses" type="select" value='Normal' placeholder="Priority"/>
</div>
<div className="form-field">
<CustomSelectField name="assignees" type="select" placeholder="Assignee"/>
</div>
<div className="form-field">
<Button size="large" variant="contained" color="primary" style={{marginLeft: '5px'}} type="submit">Save & Continue</Button>
</div>
</div>
<div className="btn-group-right">
<Button size="large" variant="contained" color="primary"
type="submit">Submit</Button>
<Button size="large" variant="contained" color="primary" onClick={handleReset}
style={{marginLeft: '5px'}} type="button">Reset</Button>
<Button size="large" variant="contained" color="primary" onClick={props.onCancel}
style={{marginLeft: '5px'}} type="button">Cancel</Button>
</div>
</Form>
</div>
</div>
)
};
export const SimpleRequestEnhancedForm = withFormik(
{
mapPropsToValues: props => {
return {
requestId: props.SimpleRequest && props.SimpleRequest.requestId || '',
requestStatuses: props.SimpleRequest && props.SimpleRequest.statusId || '6',
requestPrioritieses: props.SimpleRequest && props.SimpleRequest.priorityId || '3',
assignees: props.SimpleRequest && props.SimpleRequest.assigneeId || '',
}
},
validationSchema:validationSchema,
handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
console.log("submit Simple Request Form....")
values.assets = JSON.parse(sessionStorage.getItem('uploadedFiles'));
props.handleSubmit(values)
setSubmitting(false)
},
setFieldValue(field, value, shouldVal) {
console.log('In setFieldValue')
},
displayName: 'Simple Request Form',
})(SimpleRequestForm)

React - JS variables not updating properly on click

I made this button handle function, when clicked it will check the entered character against the stored "hangman" word.
If the letter exists in the string it shows its correct and increase
"guesses"
If it isn't present it will increase both "guesses" and "incorrect"List item
If the letter has already been tried or contains "" / " " it will do
nothing
However the functionality is acting strange, initially putting in "a" will show that it is not currently stored, the lives is default yet the guesses is still 0, it is not updating guesses.
Then inputting "b" shows it is not stored and incorrect. However it does not add a value to incorrect.
Inserting "b" on the next input shows it is stored. However correctly displays lives.
Lastly this functionality doesnt seem to work at all when removing the
This functionality just seems really strange to me. Not sure where i am going wrong
Console output:
Objecthint:
hint: "the start of something"
id: 1
title: "initial"
value: 1
word: "initial"
Hangman.js:62 not stored
Hangman.js:77 lives5
Hangman.js:78 guesses0
Hangman.js:79 incorrect0
Hangman.js:72 not stored and incorrect
Hangman.js:77 lives5
Hangman.js:78 guesses1
Hangman.js:79 incorrect0
Hangman.js:52 stored
Hangman.js:77 lives4
Hangman.js:78 guesses1
Hangman.js:79 incorrect1
code:
const [letter, setLetter]=useState('')
const [letters, setLetters]=useState([])
const [guesses, setGuesses]=useState(0)
const [incorrect, setIncorrect]=useState(0)
const [lives, setLives]=useState(5)
var hangman = { id:1,title:"initial",word:"initial",hint:"the start of something",value:1}
const handleInputButton = (e) => {
e.preventDefault();
if (letter !== "" && letter !== " "){
if (letters.includes(letter))
{
console.log("stored")
// show that this letter is correct
}
// doesnt update lives when incorrect until second click of same character?
else{
if ( hangman.word.toUpperCase().includes(letter.toUpperCase()) ) {
console.log("not stored")
letters.push(letter)
setGuesses(guesses + 1)
// update display here
}
else{
letters.push(letter)
setIncorrect(incorrect + 1)
setLives(lives - 1 )
console.log("not stored and incorrect")
}
}
}
console.log("lives" + lives)
console.log("guesses" +guesses)
console.log("incorrect" + incorrect)
}
const [Attempt, setAttempt] =([]);
const handleSubmitButton = (e) => {
e.preventDefault();
console.log("submit")
// put request here to post
}
const handleHint = (e) => {
e.preventDefault();
// reveal hint text here
console.log("hint")
}
return (
<div className='app'>
<br/> <br/> <br/> <br/> <br/> <br/>
{/* display will go here */}
<img alt="hangman figure"/>
<br/> <br/>
{/* current lives will go here */}
<p> lives: {lives} </p>
{/* attempted letters will go here */}
<ul> attempted letters:
{letters.map(letter=>(
<li className="tag auto" key={letters.indexOf(letter)}> <p> {letter} </p> </li>
))}
</ul>
<Form>
<div className="form-group">
<input value={letter} onChange={(e)=>setLetter(e.target.value)}
type="text" className="form-control stuff" id="letter" placeholder="Enter Letter" required/>
</div>
<br/> <br/>
<Button onClick={handleInputButton} type="buton" className="btn btn-primary submit" id="submit">Submit</Button>
</Form>
<br/> <br/> <br/> <br/>
{/* hint button */}
<Button>Hint</Button>
<p> {hangman.hint} </p>
<br/> <br/>
{/* finalise button */}
<Button onClick={handleSubmitButton} type="buton" className="btn btn-primary submit" id="submit">Finalize</Button>
{/* {showResult ? (
<div className='result'>
Your result is {result} of {questionList.length}
</div>
) : (
<>
<div className='question'>
<div className='index'>
<span>Question {current + 1}</span>/{questionList.length}
</div>
<div className='text' onCopy={handleCopy} >{questionList[current].question}</div>
</div>
<div className='answer-section'>
{questionList[current].answers.map((answer, index) => (
<button key={answer.id} onClick={()=> handleAnswerButton(answer.correct, startTime, timeLimit)}>{answer.content}</button>
))}
</div>
</>
)} */}
</div>
);
}

Cant reset form after submit in formik

I cant reset my form on submit or modal close event using formik. I tried using resetForm({}), resetForm(initialValues),resetForm('') nothing works for me.
RestaurantDetails.js
setting initial values
// setting formik initialValues
const setFromikInitialValue = (product_option_groups) => {
let updatedOption = product_option_groups;
product_option_groups.forEach((option, optionIndex) => {
if (option.minimum === 1 && option.maximum === 1) {
//If displaying radio buttons for modifier
//selected option is kept in a key selected_modifier
updatedOption[optionIndex] = {
...option,
selected_modifier: option.product_options[0].id,
};
} else {
//If displaying check box for modifier
//selected_modifier_count key is added to track checked box count
updatedOption[optionIndex] = {
...option,
selected_modifier_count: 0,
};
}
//For each check box selected key is added
//selected is true if check box is checked & if unchecked it is false
option.product_options.forEach((item, itemIndex) => {
updatedOption[optionIndex].product_options[itemIndex] = {
...item,
selected: false,
};
});
});
return updatedOption;
};
const initialValues = {
product_id: selectedFoodItem.id,
options: setFromikInitialValue(modifiersData),
};
render part of formik
{/* Modal */}
<div
className="modal fade dish-modal"
id={`dishModal-${selectedFoodItem.id}`}
tabIndex={-1}
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
data-backdrop="static"
data-keyboard="false"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<Formik
initialValues={initialValues}
enableReinitialize
//form submition
onSubmit={async (values, { setSubmitting, resetForm }) => {
console.log(values);
setSubmitting(false);
resetForm(initialValues);
window.$(`#dishModal-${selectedFoodItem.id}`).modal("hide");
}}
//yup form validation
validationSchema={Yup.object().shape({
options: Yup.array().of(
Yup.object().shape({
selected_modifier_count: Yup.number()
.min(
Yup.ref("minimum"),
"minimum number of modifier not choosed"
)
.max(
Yup.ref("maximum"),
"maximum number of modifier exeded"
),
})
),
})}
>
{({
isSubmitting,
setFieldValue,
values,
errors,
touched,
resetForm,
}) => (
<Form>
<div className="modal-body">
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
onClick={() => {
resetForm({});
}}
>
<span aria-hidden="true">×</span>
</button>
<div className="item-details">
<h4>{selectedFoodItem.name}</h4>
<h4>
{dollar}
{selectedFoodItem.price}
</h4>
</div>
<div className="modifiers">
{/* mapping modifier items */}
{values.options && values.options.length
? values.options.map((modifier, optionIndex) => (
<div
key={`${modifier.id}-${optionIndex}`}
className="modifiers"
>
<h5>{modifier.name}</h5>
<h6>
{modifier.minimum || modifier.maximum ? (
errors.options && touched.options ? (
errors.options[optionIndex] &&
touched.options[optionIndex] ? (
<span className="text-danger">
Minimum {modifier.minimum} Maximum{" "}
{modifier.maximum}
</span>
) : (
<span>
Minimum {modifier.minimum} Maximum{" "}
{modifier.maximum}
</span>
)
) : (
<span>
Minimum {modifier.minimum} Maximum{" "}
{modifier.maximum}
</span>
)
) : (
<span className="text-danger">
Minimum {modifier.minimum} Maximum{" "}
{modifier.maximum}
</span>
)}
{modifier.minimum > 0 ? (
<span className="badge badge-light float-right">
Required
</span>
) : null}
</h6>
<ul>
{modifier.minimum === 1 &&
modifier.maximum === 1
? modifier.product_options.map(
(item, itemIndex) => (
<li key={itemIndex}>
<div className="form-check">
<input
defaultChecked={
itemIndex === 0 ? true : false
}
className="form-check-input"
type="radio"
name="temp"
id={`exampleCheck${item.id}`}
onChange={(
event,
value = item.id
) => {
setFieldValue(
`options[${optionIndex}]`,
{
...modifier,
selected_modifier: value,
}
);
}}
/>
<label
className="form-check-label"
htmlFor={`exampleCheck${item.id}`}
>
{item.name}
<span>
{dollar}
{item.price}
</span>
</label>
</div>
</li>
)
)
: modifier.product_options.map(
(item, itemIndex) => (
<li key={`${item.id}-${itemIndex}`}>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id={`exampleCheck${item.id}`}
onClick={() => {
if (!item.selected) {
setFieldValue(
`options[${optionIndex}]`,
{
...modifier,
selected_modifier_count:
modifier.selected_modifier_count
? modifier.selected_modifier_count +
1
: 1,
}
);
} else {
setFieldValue(
`options[${optionIndex}]`,
{
...modifier,
selected_modifier_count:
modifier.selected_modifier_count -
1,
}
);
}
setFieldValue(
`options[${optionIndex}][product_options][${itemIndex}]`,
{
...item,
selected: !item.selected,
}
);
}}
defaultChecked={
item.selected ? true : false
}
/>
<label
className="form-check-label"
htmlFor={`exampleCheck${item.id}`}
>
{item.name}
<span>
{dollar}
{item.price}
</span>
</label>
</div>
</li>
)
)}
</ul>
</div>
))
: null}
</div>
<button
type="submit"
className="btn btn-primary continue-btn"
// disabled={isSubmitting || !dirty}
>
Continue
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
{/* Modal end */}