CategoryFilter.js

import React from 'react'

export default function CategoryFilter() {
  return (
    <div style={{ border: "1px solid black", padding: "15px", margin: "15px" }}>
        <h3>CategoryFilter Component</h3>
        <button>Tell TransactionFilters I'm Set</button>
        <button>Tell TransactionFilters I'm Cleared</button>
    </div>
  )
}

TransactionFilters.js

import React from 'react'
import CategoryFilter from './CategoryFilter'

export default function TransactionFilters() {
  return (
    <div style={{ border: "1px solid black", padding: "15px", margin: "15px" }}>
        <h3>TransactionFilters Component</h3>
        <button>Tell TransactionsPage to Filter</button>
        <p>Here's what I've been told: { "No filters" }</p>
        <CategoryFilter/>
    </div>
  )
}

TransactionPage.js

import React from 'react'
import TransactionFilters from './TransactionFilters'

export default function TransactionPage() {
  return (
    <div style={{ border: "1px solid black", padding: "15px", margin: "15px" }}>
        <h3>TransactionPage</h3>
        <p>Here's what I've been told: { "No filters" }</p>
        <TransactionFilters/>
    </div>
  )
}