convert to functional component

[fromb2b]

Hi,

I would like to convert DateRangePicker to a functional format:

import React, {useState} from 'react';
import './App.css';
import { DateRangePicker } from 'react-dates';
function App(props) {

const [details,setDetails]=useState(
    {city:'', star:'', startDate:{checkin_monthday:'', checkin_month :'' ,checkin_year:''},endDate:{ checkout_monthday:'', checkout_month :'', checkout_year:''}}
);
function handleChange(id,event){ 
    event.preventDefault();
    details[id]=event.target.value;
    setDetails(details );};

  return (
    <div className="App">
      <header className="App-header">
        <form  >
        <input
        
    type="text"
    name="destination"
    placeholder="Destination"
    value={details.city}
    onChange={(event)=>(event)=>handleChange(0,event)}
    
  />
      <input
      
    type="text"
    name="star"
    placeholder="star "
    value={details.star}
    onChange={(event)=>(event)=>handleChange(1,event)}
    
  />
  </form>
  <DateRangePicker
  startDate={details.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={details.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={focused} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={props.setIsFocused}
  displayFormat={() => ["DD","MM","YYYY"]}
/>
       


      </header>
    </div>
  );
}
export default App;

I am stuck in "focusedInput" conversion

[mmarkelov]

@photocherkaoui something like this:

export default function App() {
  const [sdate, setSdate] = useState(moment());
  const [edate, setEdate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  const handleDatesChange = ({ startDate, endDate }) => {
    setSdate(startDate);
    setEdate(endDate);
  };

  return (
    <div className="App">
      <DateRangePicker
        startDate={sdate}
        endDate={edate}
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
      />
    </div>
  );
}

[ljharb]

Since this seems like a general React/JS question and not specific to react-dates, I'm going to close it, but feel free to keep discussing.