CODEWITHSUNDEEP
reactjsnext.js
DonCarleone
DonCarleone

Reputation: 829

React state not updating props (using next.js)

Trying to update the state of a react-date-range object (next.js) in a component with useState / setState. Not sure what I'm doing wrong, but I keep getting an error that dateRange.startDate is undefined.

import {useState, React} from 'react'
import { DefinedRange } from 'react-date-range'
import PropTypes from 'prop-types'

export const DataCard = ({...props}) => {
    let [dateRange, setDateRange]  = useState([{
        startDate: props.dateRange.startDate,
        endDate: props.dateRange.endDate,
        key: 'selection'
      }])

    const updateDateRange = (dateRange) => {
        props.dateRange = {startDate: dateRange.startDate, endDate: dateRange.endDate}
        setDateRange([props.dateRange.startDate, props.dateRange.endDate])
    }

    return (
    <div>
        <div>
            <button>
                <DefinedRange onChange={item=> {updateDateRange([item.selection])}} ranges={dateRange}/>
            </button>
        </div>
    </div>
)}

DataCard.propTypes = {
    header: PropTypes.string,
    dateRangeComponent: PropTypes.element,
    dateRange: PropTypes.object
}

DataCard.defaultProps = {
    header: "Graph Name",
    dateRange: {startDate: new Date(), endDate: new Date()}
}

Upvotes: 1

Views: 2534

Answers (2)

Vincenzo
Vincenzo

Reputation: 1

Your initial status is an array of 1 object but when you setDateRange, you provide an array of two objects

Your init data:

[{
    startDate: props.dateRange.startDate,
    endDate: props.dateRange.endDate,
    key: 'selection'
  }] // an array of a object

setDateRange([props.dateRange.startDate, props.dateRange.endDate]) // setDateRange([a, b]), array of two objects

It should be:

setDateRange((prevState) => ({ startDate: props.startDate, endDate: props.endDate, key: prevState.key  }));

Upvotes: 0

windmaomao
windmaomao

Reputation: 7661

Your dispatch code is a bit problematic.

    const updateDateRange = (dateRange) => {
        console.log(dataRange)
        props.dateRange = {startDate: dateRange.startDate, endDate: dateRange.endDate}
        setDateRange([props.dateRange.startDate, props.dateRange.endDate])
    }

I suspect two things therefore i suggest to add a console.log.

Possibility 1

Maybe your input isn't an array, instead it's a e from event handler. So first need to confirm that by printing it onto screen.

Possibility 2

When you change something, you'd like to take changes from your input, not prop. So you need to think of why you are using props in the dispatch. Props are coming from parent, not children. Use local variable instead.

Bonus

Normally we don't render stuff inside a <button> element. It might be irrelevant to your problem, but might complicate your other parts of work. Use <div> instead.

Upvotes: 1

Related Questions