How do I create/save a dynamically created input box/label into a stateful array?

Annuli — Wed, 21 Dec 2022 20:13:22 +0000

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

Forem: Annuli

How do I create/save a dynamically created input box/label into a stateful array?

Add/remove Multiple Input Fileds dynamically in React Js