Date not passed via props in react js [Now fixed]

  • Context: JavaScript 
  • Thread starter Thread starter shivajikobardan
  • Start date Start date
Click For Summary
SUMMARY

The forum discussion addresses a bug in a React application where the date was not properly passed via props to the Subscription component. The issue was identified as a missing parentheses in the method call, specifically changing `date.toISOString` to `date.toISOString()`. This fix ensures that the date is correctly formatted as an ISO string, allowing it to display correctly in the rendered output. The discussion highlights the importance of proper method invocation in JavaScript to avoid rendering errors.

PREREQUISITES
  • Understanding of React component structure and props
  • Familiarity with JavaScript Date object and its methods
  • Basic knowledge of JSX syntax and rendering in React
  • Experience with debugging JavaScript code in a React environment
NEXT STEPS
  • Learn about React component lifecycle and prop validation
  • Explore JavaScript Date manipulation libraries such as date-fns or moment.js
  • Research best practices for debugging React applications
  • Study the differences between functional and class components in React
USEFUL FOR

Frontend developers, React enthusiasts, and anyone looking to improve their understanding of prop handling and debugging in React applications.

shivajikobardan
Messages
637
Reaction score
54
[CODE lang="javascript" title="App.js"]import './App.css';
import Subscription from './components/Subscription';
// import Myroutes from "./Myroutes.js";

function App() {
let subscriptions = [{ id: "1", date: new Date("2021", "3", "23"), title: "Monthly Subscription", amount: "125.60" },
{ id: "2", date: new Date("2020", "06", "28"), title: "Annual Subscription", amount: "1125.60" },
{ id: "1", date: new Date("2021", "09", "05"), title: "Quarterly Subscription", amount: "425.60" }]

return (
<>
<div className='App'>
<Subscription datePassed={subscriptions[0].date.toISOString} titlePassed={subscriptions[0].title} amountPassed={subscriptions[0].amount} />
<Subscription datePassed={subscriptions[1].date.toISOString} titlePassed={subscriptions[1].title} amountPassed={subscriptions[1].amount} />
<Subscription datePassed={subscriptions[2].date.toISOString} titlePassed={subscriptions[2].title} amountPassed={subscriptions[2].amount} />
</div>
</>
)
};

export default App;
[/CODE]

[CODE lang="javascript" title="Subscription.js component"]import React from 'react'
import "./Subscription.css"
function Subscription(props) {
return (
<>
<div>{props.datePassed}</div>
<h2 className="subscription-title">{props.titlePassed}</h2>
<div>{props.amountPassed}</div>
</>)
}

export default Subscription[/CODE]

Currrent Output that I'm getting:
1672147338777.png

Expected Output:

I need date to come at the top.
 
Technology news on Phys.org
FIXED:
date.toISOString should be date.toISOString()
 
  • Like
Likes   Reactions: jedishrfu and .Scott

Similar threads

  • · Replies 2 ·
Replies
2
Views
2K
  • · Replies 8 ·
Replies
8
Views
3K
  • · Replies 2 ·
Replies
2
Views
3K
  • · Replies 5 ·
Replies
5
Views
2K
  • · Replies 10 ·
Replies
10
Views
3K
  • · Replies 32 ·
2
Replies
32
Views
3K
  • · Replies 5 ·
Replies
5
Views
2K
  • · Replies 23 ·
Replies
23
Views
2K
  • · Replies 2 ·
Replies
2
Views
1K
  • · Replies 3 ·
Replies
3
Views
2K