Help with React Context in Small Maths App

Web Development Front-End
1

Hi everyone!

As part of following along with the course, I wanted to start a side project to put some things into practice. I managed to get the app working using state and passing state to all the components. But I then found context.

By trying to add context through the tree instead of state, I am having some trouble getting the app back up and running and wondered if anyone could look over the code just to point me in the right direction.

import { useState, createContext, useContext  } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css'


const MathContext = createContext(0);


export default function App() {
  return (
		<section className="container-fluid">
			<PageHeader />
			<PageContent />
		</section>
  );
};

// Creat page header component
// - TASK - Add date and time feature to top right corner.
function PageHeader() {
  return (
		<header className="bg-yellow shadow-lg rounded p-3 mt-5">
			<h1 className="display-1">Quick Maths</h1>
			<p className="lead">Learning Maths? Let's get some info about individual numbers.</p>
		</header>
  );
};

function PageContent() {
  const [num, setNum] = useState(0);
  return (
    <MathContext.Provider value={num}>
      <section className="my-5">
          <MathCard />
      </section>
    </MathContext.Provider>
  );
};

function MathCard() {
  return (
		<div className="card bg-dark-green text-white shadow-lg">
			<MathCardHeader />
			<MathCardBody />
			<MathCardFooter />
		</div>
  );
};

// Look at modifying the sentence in <p> for when a number is not selected.
function MathCardHeader() {
  const num = useContext(MathContext);
	return (
		<div className="card-header bg-darker-green p-3">
			<h2 className="display-5">Choose Your Number!</h2>
			<input 
				value={num}
        onChange={(e) => {
          setNum(e.target.value);
        }}
				className="form-control bg-dark-green text-white" 
				type="number" 
				placeholder="Enter your number" 
				aria-label="Enter your number" 
			/>
				<em>You have chosen number {num}.</em>
		</div>
	);
};

function MathCardBody() {
	return (
		<div className="card-body">
			<ul className="list-group list-group-horizontal justify-content-between mb-3">
				<MathCardNumSquared />
				<MathCardNumCubed />
				<MathCardNumSquareRoot />
			</ul>

			<MathCardNumTimesTableItem />
					
		</div>
	);
};

function MathCardNumSquared() {
	function numSquared(number: 0) {
		return Math.pow(number, 2);
	}
  const num = useContext(MathContext);
	return (
		<li className="list-group-item flex-grow-1 bg-dark-green text-white text-center">{num}² = {numSquared(num)} </li>
	);
};

function MathCardNumCubed() {
	function numCubed(number: 0) {
		return Math.pow(number, 3);
	}
  const num = useContext(MathContext);
	return (
		<li className="list-group-item flex-grow-1 bg-dark-green text-white text-center">{num}³ = {numCubed(num)}</li>
	);
};

function MathCardNumSquareRoot() {
	function numSquareRoot(number) {
		return Math.sqrt(number).toFixed(2);
	}
  const num = useContext(MathContext);
	return (
		<li className="list-group-item flex-grow-1 bg-dark-green text-white text-center">√{num} = {numSquareRoot(num)}</li>
	);
};

function ListItem() {
const num = useContext(MathContext);
  return (
      <li className="list-group-item bg-dark-green text-white">1 X {num} = {num * 1}</li>
  );
}

// Modify this to use a loop...
function MathCardNumTimesTableItem() {
	return (
		<ul className="list-group">
			<ListItem />
		</ul>
	); 
};

function MathCardFooter() {	
	return (
		<div className="card-footer bg-light-green text-white">
			Is this a prime number... 
  	</div>
	);
	
};

Appreciate any help on this one.
Craig