How to create a simple React Dropdown with Date range

Question

I am new to React and I want to design a simple dropdown having options like : Last 30 days , Last 60 days , Last 6 months.

Based on selection , I will render an specific array of object. Can someone guide me how I can design one, I tried looking at airbnb react-dates but I dont want a calender pop up. Also I was thinking of simply using moment but not sure how to design one. If some one has a codepen example please help me.

If it fix your problem, would you mind to accept my answer? Thanks mate — Tony Bui, Dec 26 '18 at 09:32

score 1 · Accepted Answer · answered Dec 17 '18 at 06:27

I use 'reactstrap' to create the dropdown button and put the option into the array. You can my code here:

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "reactstrap";
import "./styles.css";

function App() {
  const options = [
    { option1: "1" },
    { option2: "2" },
    { option3: "3" },
    { option4: "4" }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Input type="select">
        {options.map(option => {
          return (
            <option value={Object.values(option)}>
              {" "}
              {Object.keys(option)}{" "}
            </option>
          );
        })}
      </Input>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Or check this link: https://codesandbox.io/s/xj53396w8o

How to create a simple React Dropdown with Date range

1 Answers1