Hello!
I am trying to save a dynamically created label/input box into a stateful array.
Background: There is a checkbox component that passes all ticked check boxes to an array in the parent. The parent passes that state to a hidden component that ONLY opens when certain ticked check boxes are filtered through.
Action: I want to dynamically create an object using the string from the checkbox selections and the value from the input box and save to the state of the hidden component. If the user unchecks the checkbox, the those values would be removed from the array.
Homework: I've looked at 4 different sources and these two
Add/remove Multiple Input Fileds dynamically in React Js
You will learn to add and remove multiple input fields dynamically on a button click with react js. It is explained with complete code
codingstatus.com
are the closest approaches that might work for my situation. In most cases, I can create the input boxes for each string, however, I can't find a way to save the two pieces of information in the component's state.
Current Results: I have 1 input box for each label (the ticked checkbox), but only the input box values save to state. How could I save the label AND input box value to this component's state? Thank you!
// state
const [transitCosts, setTransitCosts] = useState([{
modalTransit: '',
dailyModalCost:'',
}]);
// Set the input box data to state
const addTransitCosts =()=>{
setTransitCosts([...transitCosts, {
modalTransit: '',
dailyModalCost:''
}])
};
// For the input box value
const handleDailyCosts =(index, e)=>{ // HOW TO SAVE 2 VALUES WITH 1 INDEX?
const { name, value } = e.target;
const list = [...transitCosts];
list[index][name] = value;
setTransitCosts(list);
}
return (
<div key={key}>
{checkedCategories.filter(category => category !== 'Vehicle' && category !== 'Walking').map((categoryData, index) => {
return(
<div key={index}>
<div className={`${styles.insetBox}`} onChange={addTransitCosts}>
<label className={`${styles.containerLabel}`} htmlFor='modalDailyCost'>{categoryData}</label>
</div>
{transitCosts.map((data, index) => {
return(
<div key={index} className={`${styles.dataInputBox}`}>
<div className={`${styles.insetBox}`}>
<input type="text"
onChange={(e)=>handleDailyCosts(index, e)}
name="dailyModalCost"
value={dailyModalCost}
id="dailyModalCost"
placeholder="0.00"
/>
</div>
</div>
);
})}
</div>
);
})}
</div>
);
Top comments (0)