CODEWITHSUNDEEP
javascriptreactjs
arunlazer
arunlazer

Reputation: 41

How to change function component code to class component

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>
    )
  }
}

Upvotes: 0

Views: 110

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

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>
    )
  }
}

Upvotes: 1

Related Questions