How to change function component code to class component

Question

I have a functional component but I need in class component. So I tried to change this but had some error but I can't find what I'm missing.

import React, { useState } from 'react';
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

function App() {
  const [value, onChange] = useState([new Date(), new Date()]);

  return (
    <div>
      <DateTimeRangePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}
export default App

I tried this but it's not working:

import React, { Component } from 'react'
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

export default class App extends Component {
  constructor(props){
    super()
    this.state = {
      value:new Date()
    }
  }
  render() {
    return (
      <div>
        <DateTimeRangePicker
          onChange={() => this.setState({value:new Date()})}
          value={this.state.value}
        />    
      </div>
    )
  }
}

Why does the function version have two dates in the state where the class version only has one? Assuming the first one is correct (looks like it is from npmjs.com/package/@wojtekmaj/react-datetimerange-picker) your state in the second case should be an array of two dates too. — jonrsharpe
– jonrsharpe, Commented Aug 17, 2020 at 12:36
Ciao @jonrsharpe, I thought the same until I saw the npm page npmjs.com/package/@wojtekmaj/react-datetimerange-picker. But why??? — Giovanni Esposito
– Giovanni Esposito, Commented Aug 17, 2020 at 12:38
@GiovanniEsposito it's a datetime range picker, so presumably [start, end]. — jonrsharpe
– jonrsharpe, Commented Aug 17, 2020 at 12:38
there is an example with class github.com/wojtekmaj/react-datetimerange-picker/blob/master/… — Champion
– Champion, Commented Aug 17, 2020 at 12:40

Giovanni Esposito · Accepted Answer · 2020-08-17 13:04:20Z

1

As explained in npm page, onChange function returns a value. So you could change class component like this:

import React, { Component } from 'react'
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value:[new Date(), new Date()],
    }
  }
  render() {
    return (
      <div>
        <DateTimeRangePicker
          onChange={(value) => this.setState({value:value})}
          value={this.state.value}
        />    
      </div>
    )
  }
}

edited Aug 17, 2020 at 13:04

answered Aug 17, 2020 at 12:41

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

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

2 Comments

arunlazer Over a year ago

Actually The value is an array , But I used single value that's why it didn't worked

Giovanni Esposito Over a year ago

@arunlazer so should be something like alue:[new Date(), new Date()], correct?

Collectives™ on Stack Overflow

How to change function component code to class component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related