I’m building a small budget app dashboard using React. Currently, I have a large MyNavbar.jsx file, and as I’m trying to break it into smaller, more manageable components, I’m feeling a bit lost. I need help organizing my code and splitting it properly without breaking things. I’m especially unsure about how to structure the app components and pass data between them.
Here’s the code I currently have:
App.js
import React from 'react';
import './App.css';
import MyNavbar from './components/navbar/MyNavbar';
import MyChart from './components/main/leftSide/MyChart';
function App() {
return (
<div className="App">
<MyNavbar />
</div>
);
}
export default App;
MyNavbar.jsx
import React from 'react'
import { useState } from 'react'
import cl from './Navbar.module.css'
import transactions from '../../transactions.json'
import MyChart from '../main/left side/chart/MyChart'
const MyNavbar = () => {
const [month, setMonth] = useState(0)
const monthes = [
{ name: 'January 2023', value: 0, year: 2023, month: '01' },
{ name: 'February 2023', value: 1, year: 2023, month: '02' },
{ name: 'March 2023', value: 2, year: 2023, month: '03' },
{ name: 'April 2023', value: 3, year: 2023, month: '04' },
{ name: 'May 2023', value: 4, year: 2023, month: '05' },
{ name: 'June 2023', value: 5, year: 2023, month: '06' },
{ name: 'July 2023', value: 6, year: 2023, month: '07' },
{ name: 'August 2023', value: 7, year: 2023, month: '08' },
{ name: 'September 2023', value: 8, year: 2023, month: '09' },
{ name: 'October 2023', value: 9, year: 2023, month: 10 },
{ name: 'November 2023', value: 10, year: 2023, month: 11 },
{ name: 'December 2023', value: 11, year: 2023, month: 12 },
{ name: 'January 2024', value: 12, year: 2024, month: '01' },
{ name: 'February 2024', value: 13, year: 2024, month: '02' },
{ name: 'March 2024', value: 14, year: 2024, month: '03' },
{ name: 'April 2024', value: 15, year: 2024, month: '04' },
{ name: 'May 2024', value: 16, year: 2024, month: '05' },
{ name: 'June 2024', value: 17, year: 2024, month: '06' },
{ name: 'July 2024', value: 18, year: 2024, month: '07' },
{ name: 'August 2024', value: 19, year: 2024, month: '08' },
{ name: 'September 2024', value: 20, year: 2024, month: '09' },
{ name: 'October 2024', value: 21, year: 2024, month: 10 },
{ name: 'November 2024', value: 22, year: 2024, month: 11 },
{ name: 'December 2024', value: 23, year: 2024, month: 12 },
{ name: 'January 2025', value: 24, year: 2025, month: '01' },
]
const allTransactions = transactions;
let currentMonth = monthes[month].month;
let currentYear = monthes[month].year;
const currentDate = new RegExp(`^${currentYear}-${currentMonth}-\\d{2}$`);
console.log(currentDate)//getting the date that i should search payments from
const matchedTransaction = allTransactions.filter(t => currentDate.test(t.date));
console.log(matchedTransaction);//whole objects which pass through filter above
let dataForChart = [["Category", "Amount"], ...matchedTransaction.map(el => [el.category, el.amount])];//needs to be summed
console.log(dataForChart);
const dataForChartSummed = dataForChart.slice(1).reduce((acc, [category, amount]) => {
acc[category] = (acc[category] || 0) + Math.round(amount)
return acc
}, {})
console.log(dataForChartSummed)//ready for chart but not array
const dataForChartSummedArray = Object.entries(dataForChartSummed).map(([category, amount]) => [category, amount])
console.log(dataForChartSummedArray);
const changeMonthUp = () => {
if (month < monthes.length - 1) {
setMonth(month + 1)
console.log(month)
} else {
setMonth(0)
console.log(month)
}
}
const changeMonthDown = () => {
if (month < monthes.length && month !== 0) {
setMonth(month - 1)
console.log(month)
} else {
setMonth(24)
console.log(month)
}
}
return (
<div className={cl.header}>
<div className={cl.inner_header}>
<div className={cl.month_box}>
<h1>Month:</h1>
</div>
<ul className={cl.functionality}>
<span>
<li><button onClick={changeMonthDown}>back</button></li>
</span>
<span>
<li>
<h1>{monthes[month]
? monthes[month].name
: 'error'
}</h1>
</li>
</span>
<span>
<li><button onClick={changeMonthUp}>further</button></li>
</span>
</ul>
</div>
<div>
<MyChart transactions={dataForChartSummedArray}/>
</div>
</div>
)
}
export default MyNavbar
MyChart.jsx
import React from 'react';
import { Chart } from 'react-google-charts';
const MyChart = ({ transactions }) => {
return (
<div>
<Chart
chartType="PieChart"
data={[['Category', 'Amount'], ...transactions]}
options={{ title: 'All spendings for this month' }}
legendToggle
/>
</div>
);
};
export default MyChart;
The Problem:
I want to organize my components better. Right now, everything is getting jumbled into one file (MyNavbar.js), and I’m not sure how to break it into logical components without breaking the functionality. My goal is to:
- Have a component for the navbar (
MyNavbar) - Have a component for the main content with a chart on the left and some items on the right
- Have a footer
- Have a
SumOfItemscomponent to show the total spending of the month
I’m trying to structure my app like this:
/src
/components
/navbar
MyNavbar.jsx
/main
/leftSide
MyChart.jsx
/rightSide
ItemsList.jsx
MiddleOfPage.jsx
/underparts
SumOfItems.jsx
/footer
Footer.jsx
App.js
transactions.json
App.css
What I need help with:
- How to structure my components and break down
MyNavbarproperly. - How to pass data down from parent components (like
MyNavbar) to child components (likeMyChart). - Any best practices for managing state and props in this type of app.
My Goal:
I want to make sure that the logic in each component is clean and the app is structured well. I also want to be able to pass the required data between components while keeping the code maintainable and scalable.