3

I want to fill the inputs value of a form with default values once the modal is opened

I did it with pure javascript using document.getElementById(textId).value='some value as follow:

  for(var i=0; i<details_data.length;i++){
     let textId='text'+i;
     let amountId='amount'+i;
     document.getElementById(textId).value=details_data[i].text
  }

This worked fine. but I want to know how to do it with React since I don't believe this is a best practice.

what i tried is to set the input value like this:

<input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/>

But this woudn't let me change the value of the input. it just set the default value, and when i type in the input the value woudn't change as I want.

This is my code

const [details_data,set_details_data]=useState([
    {'text':'','amount':''}
])
// called this function on `onChange` and store the data in `details_data`
function details_handler(e){
    let name=e.target.name;
    let value=e.target.value;
    details_data[this][name]=value;
    set_details_data(details_data);
  }

JSX:

(In my case user can add inputs as many as he wants,That's why I put the inputs in a the mapping loop)

  {
    details_data.map((el,index) => {
        let textId='text'+index;
        let amountId='amount'+index;
        return (
            <div key={index}>
                <input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/>
                <input name='amount' id={amountId} onChange={details_handler.bind(index)}/>
            </div>
            );
      })
  }
Ali
  • 1,633
  • 7
  • 35
  • 58
  • What are the props you are receiving to your modal? And does does have multiple text and amount. – Karthik Apr 21 '20 at 15:02
  • @karrthik There are no props, the values are coming from an API request. And yes, user might add new inputs. But suppose i only have these inputs since it doesn't matter the number of inputs, if you can help out with these example i can apply the concept on different scenarios. – Ali Apr 21 '20 at 15:06
  • Posted an answer. Please check it. – Karthik Apr 21 '20 at 15:07
  • let me know if that helps. – Karthik Apr 21 '20 at 15:13
  • @Karrthik The values are correctly set but can't be changed. when i type in the input nothing happened but keep the values that are coming from the response – Ali Apr 21 '20 at 15:23
  • updating the answer how your input and on change should be. – Karthik Apr 21 '20 at 15:25

1 Answers1

3
 useEffect(() => {
     if(detailsProps) {
         set_details_data(detailsProps);
     }
 }, [detailsProps])

where your detailsProps (data from the api) will look something like this

 detailsProps = [
    {'text':'text1','amount':'100'},
    {'text':'text2','amount':'200'}
 ]

onChange Function

const details_handler = (event, index) => {
   const items = [...details_data];
   items[index][event.target.name] = event.target.value;
   set_details_data(items);
}

your view

 {
details_data.map((el,index) => {
    return (
        <div key={index}>
            <input name='text' value={el.text} onChange={(e) => details_handler(e, index)}/>
            <input name='amount' value={el.amount} onChange={(e) => details_handler(e, index)}/>
        </div>
        );
  })
}
Karthik
  • 1,088
  • 6
  • 17
  • just need to change `event` to `e` in the handler function to be same as the params – Ali Apr 21 '20 at 15:43
  • 1
    Thanks. Updating the answer. Hope this will help someone else. – Karthik Apr 21 '20 at 15:44
  • 1
    I dont know the complete code of your file but I assumed your modal was in some other file and you wanted to pass it as props. In react props will be passed to component multiple times you shouldn't update the component state multiple times. here [detailsProps] is acting as subscribed and if there is change in detailsProps it executes the internal code. if it is in same file you can directly update the state after api call only once. – Karthik Apr 21 '20 at 16:32