DEV Community

Annuli
Annuli

Posted on

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

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

favicon codingstatus.com
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)