React Methods within View construction

I am working with React for a project right now, and I have a quick question about views. I have an array with options for this dropdown menu, and I want to display all of the options in this array. Is there a way to do this without a for loop, or is there a way to use a for loop here? All help is greatly appreciated!

<Input
    type='select'
    name='orderState'
    id='orderState'
    invalid={!isFieldNotEmpty(orderState)}
    valid={isFieldNotEmpty(orderState)}
    value={orderState}
    onChange={(e) => setOrderState(e.target.value)}
    >
        <option></option>
                                    
        for (const test in accounts){
            <option>test</option>
        }
</Input>

Answer

See the below code.

import React from "react";
import "./style.css";

export default function App() {
  let accounts = ["email1","email2","email3"];
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <select
        type="select"
        name="orderState"
        id="orderState"
      >       
      {accounts.map(account => (
        <option>{account}</option>
      ))}
      </select>
    </div>
  );
}

For each element in array it will return a option element.

Leave a Reply

Your email address will not be published. Required fields are marked *