0

I'm trying to make a dynamic form with Rows & Columns but having issue in rendering Select Control with Option & getting Promise Object. In

 render() {
    return (
            <div className="container">
                 <Form>
                     {this.CreateInputs()}
                     <Button primary>Submit</Button>
                </Form>
            </div>
    );
}

CreateInputs() {
  return( 
        <div className="row custom-form-controls">
        {
            this.state.FieldList.map((fld, index) =>
                <div class="col-12 col-md-6 col-xl-6">
                    <div class="form-group"  key={fld.FildTypeId}>
                        {/* Create a label */}
                        <Form.Label htmlFor={fld.FildTypeId}>{`${fld.Name}`}</Form.Label> {' '}
                        {/* Select Input Control based on fld : {FildName : 'select', Value:''<Control's Id>} */}
                         {this.SelectConrol(fld)}
                    </div>
                </div>
            )
        }
        </div>)
}

Now select control based on Fld

    SelectConrol = async (fld) => {
    switch(fld.FildName) {
        case 'text':
            return <Form.Control style={{padding : '0px 0px 0px 5px'}} required type={fld.FildName} placeholder={fld.Name} id={fld.Value}></Form.Control>
        case 'select':
            let  dropdowndata =  await this.GetLookupData(fld.LookupFildId);
            if(dropdowndata.length != undefined && dropdowndata.length > 0) {
                return (<Form.Control as="select"  id={fld.Value}>
                {
                    dropdowndata.map((dropData, index) => 
                        <option value={dropData.Value} key={dropData.Key}> {dropData.Value}</option>)
                }
                </Form.Control>)
            }
        default:
          return '';
      }
}

I'm getting data array in dropdowndata but its not rendering! As per below we having API function :

 GetLookupData = async (lookupId) => {
    const dropDownData = []
    await fetch('http://localhost:65383/api/UICreation?LookupId=' + lookupId)
    .then(response => response.json())
    .then(data => dropDownData.push(...data));
    return dropDownData;
}

Please help to fix it. Thanks in advance.

Vishal Patel
  • 1
  • 2
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jared Smith Jul 01 '20 at 11:02
  • You are going to have to restructure your entire code: you will have to conditionally render the things that rely on the asynchronous data and move that data into state. This is covered in the [official FAQ](https://reactjs.org/docs/faq-ajax.html) – Jared Smith Jul 01 '20 at 11:04

0 Answers0