hello i am trying to map items stored in my redux into a form . I created a component called PAYMENT.js that gives a format of how the item should be arranged
THIS IS A REACT PROJECT
PAYMENT.JS
import React from "react";
function Payment({ name, price, count, itemSize }) {
return (
<div>
<p> {name}, {itemSize}, {count} </p>
</div>
);
}
export default Payment;
I want it to be mapped in an input feild , this feild would be readable .
Here is it
<div class="telephone">
<label for="name"></label>
<input
className="payment_form"
type="text"
placeholder="My address"
name="telephone"
value={items.map((item, id) => (
<Payment
id={items.id}
key={id}
name={item.name}
price={item.price}
size={item.size}
image1={item.image1}
itemSize={item.itemSize}
count={item.count}
/>
))}
id="telephone_input"
required
/>
</div>
i get [OBJECT , OBJECT ][OBJECT , OBJECT ]
Instead of the actual object . Putting the map function in a p tag and iget the value of the items in the redux
<p>
{" "}
{items.map((item, id) => (
<Payment
id={items.id}
key={id}
name={item.name}
price={item.price}
size={item.size}
image1={item.image1}
itemSize={item.itemSize}
count={item.count}
/>
))}
</p>
OUTPUT
Von dutch pink, Xtra large, 1
Von dutch camoeo, Xtra large, 2
Von dutch pink, Xtra large, 3
I want this out put to show in the input feild so i can send it over
note that you should not give the attribute "value" an array value because a value attribute must be a string
Related
I would like to only be able to select a single checkbox and not all or more than one. I would like to use checkbox instead of radio because I can disable it without having to mark another radio
<C.SingleCard>
<h2>Pizza</h2>
<div>
<hr />
<h3>Flavors</h3>
<hr />
</div>
<div>
<h4>Pepperoni</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<h4>Chicken</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<h4>Bacon</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<button>Add</button>
</div>
</C.SingleCard>
Here's the simplest way I can think of:
Put the options in an array and just keep track of the selected index. Set the index to null if the user selected the same index. Use the index parameter of map to set checked=true on the selected box. The onChange callback will trigger when the user selects one of the boxes, you can ignore the event parameter and just pass the index of the box.
const options = ['pepperoni', 'chicken', 'bacon'];
export default function App() {
const [selected, setSelected] = useState(null);
function onChange(i) {
setSelected((prev) => (i === prev ? null : i));
}
function whatDidIPick() {
console.log(options[selected] || 'nothing');
}
return (
<div>
{options.map((o, i) => (
<label key={i}>
{o}
<input
type="checkbox"
checked={i === selected}
onChange={() => onChange(i)}
/>
</label>
))}
<br />
<button onClick={whatDidIPick}>Log what I picked</button>
</div>
);
}
https://stackblitz.com/edit/react-ts-1uwfcq?file=App.tsx
I'm new to JavaScript and already go through similar questions. I create an input mask for phone number where it has the region code in the form. However, it saves in the database together with the region code. How can I remove special character from an input form? For example:
(+60)123456789 --> 0123456789
I have this block of code where the input form goes:
<div className="mt-4">
<InputMaskComponent
id="company_phone_no"
mask="+(60)999999999999"
label="Company Phone Number"
value={(formState.company_phone_no || '').replace(/[^a-zA-Z0-9 ]/g, '')}
variant="standard"
onChange={handleChange}
>
</InputMaskComponent>
</div>
I try to use the replace() but still cannot managed to get it right. I already have this mask.js component:
export default function InputMaskComponent({id,mask,value,onChange,label,variant}) {
return (
<InputMask
id={id}
name={id}
mask={mask}
maskChar=""
value={value}
onChange={onChange}
>
{()=> <TextField fullWidth id={id} name={id} label={label} variant={variant} />}
</InputMask>
);
}
I have this form that draws some fields dynamically and set the state of the form, the code is working flawlessly check the code here,
this is how the return statement looks like
return (
<div className="patientForm">
<section className="form">
<form onSubmit={onSubmit}>
{patientFormFields.map(({ title, type, values }, index) => (
<div className="form-group w-50" key={index}>
<label htmlFor={title}>{capitalize(title)}</label>
{type === "select" ? (
<select
name={title}
id={title}
value={formValue[title]}
onChange={(e) => handleChange(e, title)}
>
{values.map(({ value, text }, index) => (
<option key={index} value={value}>
{text}
</option>
))}
</select>
) : (
<input
type={type}
name={title}
id={title}
placeholder={capitalize(title)}
value={formValue[title]}
onChange={(e) => handleChange(e, title)}
/>
)}
</div>
))}
</form>
</section>
</div>
);
My problem is I don't like having my return statement be filled with logic so I tried to refactor the logic part into a separate component, check the code here,
this is my return statement now
return (
<div className="patientForm">
<section className="form">
<form onSubmit={onSubmit}>
{patientFormFields.map(({ title, type, values }, index) => (
<div className="form-group w-50" key={index}>
<label htmlFor={title}>{capitalize(title)}</label>
<FormFields type={type} title={title} values={values} />
</div>
))}
</form>
</section>
</div>
);
but it didn't work as expected, the input kept losing focus when I type, I looked up the problem and it seems that when I update my state, the component rerenders, react can't compare the two components/functions and that causes a creating a new component, I guess?! when I tried using a regular function (line-53) that returns JSX it worked correctly, check the code here.
this is my return statement now
return (
<div className="patientForm">
<section className="form">
<form onSubmit={onSubmit}>
{patientFormFields.map(({ title, type, values }, index) => (
<div className="form-group w-50" key={index}>
<label htmlFor={title}>{capitalize(title)}</label>
{FormFields(type, title, values)}
</div>
))}
</form>
</section>
</div>
);
};
The explanation sort of make sense but I don't understand why did my code work when I converted the JSX call in the component return to a regular function, aren't they both functions? and shouldn't my second code also be buggy since functions are reference type, and react shouldn't be able to compare them, I feel there is something missing that I don't understand. Also, what would be a better way to refactor that logic away from the component return?
edit: add code snippet to the problem
So currently, this is what I have to populate my dropdown menu. I use React Hook Form to create my dropdown. Currently, the options are hard-coded, but I want to read data from an excel or cvs file and then populate my options from that data. I have googled but most show up as populate from json file. I want to populate from excel file.
Thank you!
<h5 for="secondaryControls">Secondary controls-other </h5>
<div className="float-left">
{fields.map((field, idx) => {
return (
<div key={`${field}-${idx}`}>
<select name="primaryControls" ref={register}>
<option value="Component3">->Link: Lift /Transfer Seat </option>
<option value="Component4">->ASENTO – XL-SEAT: Lift /Transfer Board</option>
value={field.value}
onChange={e => ChangeItem(idx, e)}
</select>
<input
type="text"
style={{width: "370px"}}
value={field.value}
onChange={e => ChangeItem(idx, e)}
/>
<button type="button" onClick={() => RemoveDropDown(idx)}>
X
</button>
<button type="button" onClick={() => NewDropDown()}>
+
</button>
<br /><br />
</div>
);
})}
</div>
You need to first convert your excel file to a JSON. There are multiple libraries out there which will help you do that, one of them is convert-excel-to-json.
Once your file is converted to JSON, then you can easily loop over the object to create dropdown options.
I am new in react, I have certain domain in JS, I imagine this is a simple question but I have been searching for 2 hours and I haven't found a satisfactory answer :(
I have the check boxes:
<Col md="4">
<FormGroup>
<Label>Have Children</Label>
<CustomInput type="radio" name="customRadio" label="Yes" value="yes" />
<CustomInput type="radio" name="customRadio" label="No" value="no" />
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label>Have Spouse</Label>
...(same as children input)
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label>Have Family Members</Label>
...(same as children input)
</FormGroup>
</Col>
If you click on "have children"
I want that some divs after, related to children, to be displayed. If not, they should be hidden. And the same for the other options.
I want to know what is the cleanest way to do this.
The checkbox should toggle a boolean in state.
You then conditionally render the children if the value in state is true.
So attach a checked value and change handler to your groups:
<FormGroup>
<Label>Have Children</Label>
<CustomInput type="radio" name="customRadio" label="Yes" value="yes" onChange={() => this.handleChange} checked={this.state.visibility} />
<CustomInput type="radio" name="customRadio" label="No" value="no" onChange={() => this.handleChange} checked={!this.state.visibility}/>
</FormGroup>
The create the state value in your class and toggle it with the handleChange method
state = {visibility: false}
handleChange = () => this.setState({visibility: !this.state.visibility})
Then you can conditionally render your thing based on the visibility boolean, so...
<div>{this.state.visibility && <p>Now You see me</p>}</div>
Just think of the data structure beforehand.
From your question, I assume you simply want something like this:
If children checkbox is checked, show elements related to children
If spouse checkbox is checked, show elements related to spouse.
etc.
The way I see it, you need an array of checkboxes with each of their statuses (checked or not). You can store this information in the component state.
// in the constructor
this.state = {
checkboxes: [
{ id: 1, label: 'children', checked: false },
{ id: 2, label: 'spouse', checked: false },
],
}
Then, in your render() function, you just need to loop through the array like this:
const { checkboxes } = this.state;
return (
<div>
{checkboxes.map((checkbox, index) => (
<div>
<label>{checkbox.label}</label>
<input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
{checkbox.checked && <div>show this if the checkbox is checked</div>}
</div>
))}
</div>
);
Just remember to implement this.toggleCheckBox method in the class. If you are unsure of how to do it, here's a codesandbox for you to check out.