how to render the correct date from table in mysql in react js

Question

I'm kinda stuck I have a table with 4 readings in MySQL with different dates in the date field when I go to render them out they all show today's date... why?, what am i doing wrong? here is my code...

getReading = user_id => { const { readings } = this.state;

if (
  readings.length > 0 &&
  readings.find(reading => reading.user_id === user_id)
) {
  this.setState({
    reading: {
      ...this.state.reading,
      user_id: readings.find(reading => reading.user_id === user_id)
        .user_id,
      date: readings.find(reading => reading.user_id === user_id).date,
      sugarB: readings.find(reading => reading.user_id === user_id).sugarB,
      carbsB: readings.find(reading => reading.user_id === user_id).carbsB,
      insulinB: readings.find(reading => reading.user_id === user_id)
        .insulinB,
      insulinSB: readings.find(reading => reading.user_id === user_id)
        .insulinSB,
      insulinFB: readings.find(reading => reading.user_id === user_id)
        .insulinFB,
      sugarL: readings.find(reading => reading.user_id === user_id).sugarL,
      carbsL: readings.find(reading => reading.user_id === user_id).carbsL,
      insulinL: readings.find(reading => reading.user_id === user_id)
        .insulinL,
      hbp: readings.find(reading => reading.user_id === user_id).hbp,
      lbp: readings.find(reading => reading.user_id === user_id).lbp,
      hr: readings.find(reading => reading.user_id === user_id).hr,
      sugarD: readings.find(reading => reading.user_id === user_id).sugarD,
      carbsD: readings.find(reading => reading.user_id === user_id).carbsD,
      insulinD: readings.find(reading => reading.user_id === user_id)
        .insulinD
    }
  });
}

}; and my state looks like this... readings: [], reading: { user_id: 0, date: new Date().toLocaleDateString(), sugarB: 0, carbsB: 0, insulinB: 0, insulinSB: 0, insulinFB: 0, sugarL: 0, carbsL: 0, insulinL: 0, hbp: 0, lbp: 0, hr: 0, sugarD: 0, carbsD: 0, insulinD: 0 },

everything except for the date comes up right

Wesley Owen
– Wesley Owen

2020-01-06 20:39:10 +00:00
Commented Jan 6, 2020 at 20:39 — Wesley Owen
– Wesley Owen, Commented Jan 6, 2020 at 20:39

David Desjardins · Accepted Answer · 2020-01-06 21:01:18Z

1

You can update your code to this one which will do the exact things but much easier to read. The date from the SQL might be null. In your render function, you probably do something like new Date("from SQL" => null).

const currentReading = readings.find(reading => reading.user_id === user_id);
if (
  readings.length &&
  currentReading
) {
  this.setState({
    reading: {
      ...this.state.reading,
      ...currentReading
    }
  });
}

answered Jan 6, 2020 at 21:01

David Desjardins

2241 silver badge5 bronze badges

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

6 Comments

jbergeron Over a year ago

As @David said, check that your date is not null or undefined. If it is defined, it might be the way you render it the problem.

David Desjardins Over a year ago

@jbergeron Thank you

Wesley Owen Over a year ago

I just tried that and it puts all the dates the same but now they all say the 2020-01-04... when i get the readings in from the database it reads all correct... and I tried to take out of the state date: new Date().now().toLocaleString() and it gives me no date

David Desjardins Over a year ago

are you calling something like new Date(this.state.reading.date) ?

Wesley Owen Over a year ago

in the state itself I'm putting date: new Date().now().toLocaleString()

|

Collectives™ on Stack Overflow

how to render the correct date from table in mysql in react js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related