How to display array values in dropdownlist using react js?

Question

I want to display all months in dropdown using react js. Below is my code .I have used moments to fetch all 12 months. I am getting value in console but not in my dropdown.

To display the dropdown values want to use the . I have used that also. I don't know where I went wrong. Could any one can help me with this? Thanks in advance.

const fareMon = () => {
      const months = [];
      const monthList = moment.months();
      months.push(<option value={monthList} />);
      console.log('MONTHS123', monthList);
      return months;
};
return (
<div className={styles.formClm2}>
    <Form.Group className={styles.formGroup}>
        <Form.Label>{t('PaymentPage.lblExpiry')}</Form.Label>
        <div className="double">
            <Form.Control required as="select" name="startDate">
                <option value="">Months</option>
                {fareMon()}
            </Form.Control>
        </div>
    </Form.Group>
</div> )

Hemanath · Accepted Answer · 2020-03-20 08:16:08Z

1

const fareMon = () => {
  const monthList = moment.months();
  const months = monthList.map(item => (
    <option key={item} value={item}>{item}</option> 
  ));
  console.log('MONTHS123', monthList);
  return months;
};

you need to iterate the monthsList and map each month to a <option>.

answered Mar 20, 2020 at 8:16

Hemanath

1,0807 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Miles · Accepted Answer · 2020-03-20 08:12:02Z

1

You need to iterate over the array of months and set the value in the form controls options element.

Something like this, something simplified.

<Form.Control required as="select" name="startDate">
  {months.map(month => (<option key={month.id} value={month.value}>{month.label}</option>))}
</Form.Control>

Key points:

Iterate over a data source of some description.
Ensure each option has a key prop

answered Mar 20, 2020 at 8:12

Jon Miles

9,96312 gold badges49 silver badges68 bronze badges

Comments

Sohail Ashraf · Accepted Answer · 2020-03-20 08:19:04Z

1

moment.months() returns an array containing the months name, you don't need to create a new array.

You have to map over the array inside the Select to show up the options.

Example:

const fareMon = () => {
    const monthList = moment.months();
    return monthList;
};
return (
    <div className={styles.formClm2}>
        <Form.Group className={styles.formGroup}>
            <Form.Label>{t('PaymentPage.lblExpiry')}</Form.Label>
            <div className="double">
                <Form.Control required as="select" name="startDate">
                    <option value="">Months</option>
                    {fareMon().map( month => (<option key={month} value={month}>{month}</option>))}
                </Form.Control>
            </div>
        </Form.Group>
    </div>
)

edited Mar 20, 2020 at 8:19

answered Mar 20, 2020 at 8:13

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to display array values in dropdownlist using react js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related