How do I create/save a dynamically created input box/label into a stateful array?
Tags: react, dynamic, arrays, state
Published: 2022-12-21 20:13:22

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

    {%embed https://codingstatus.com/add-remove-multiple-input-fileds-dynamically-in-react-js/%}
    {%embed https://www.youtube.com/watch?v=9IhsYu4eKJ8%}

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>
);
```