Map trough context in react - reactjs

Question

I'm trying to map trough my context in React but it won't render anything. (No error messages either). My app is wrapped with the context provider.
My context
import { createContext, useState } from "react";
export const ExpenseContext = createContext();
export const ExpenseProvider = ({ children }) => {
const [expenseType, setExpenseType] = useState();
const [description, setDescription] = useState();
const [value, setValue] = useState();
return (
<ExpenseContext.Provider
value={{
expenseType,
description,
value,
setExpenseType,
setDescription,
setValue,
}}
>
{children}
</ExpenseContext.Provider>
);
};
Where I want to render
import React from "react";
import { useContext } from "react";
import { ExpenseItem } from "./ExpenseItem";
import { ExpenseContext } from "../ExpenseContext";
export const ExpenseList = () => {
const context = useContext(ExpenseContext);
return (
<div>
{Object.keys(context).map((key) => (
<ExpenseItem
expenseType={key.expenseType}
description={key.description}
value={key.value}
></ExpenseItem>
))}
</div>
);
};
My item component
In my item component I'm just rendering {props.description} as a test.
Context data
My context gets data from a form like this:
import React from "react";
import classes from "./Form.module.css";
import { IoIosAddCircleOutline } from "react-icons/io";
import { useContext, useState } from "react";
import { ExpenseContext } from "../ExpenseContext";
export const Form = () => {
const [errorDesc, setErrorDesc] = useState(false);
const [errorSelect, setErrorSelect] = useState(false);
const [errorVal, setErrorVal] = useState(false);
const context = useContext(ExpenseContext);
const onSubmit = (e) => {
e.preventDefault();
if (!context.expenseType) {
setErrorSelect(true);
} else {
setErrorSelect(false);
}
if (!context.description) {
setErrorDesc(true);
} else {
setErrorDesc(false);
}
if (!context.value || isNaN(context.value)) {
setErrorVal(true);
} else {
setErrorVal(false);
}
};
return (
<form className={classes.form} onSubmit={onSubmit}>
<select
className={classes.select}
name="select"
id=""
onChange={(e) => context.setExpenseType(e.target.value)}
>
<option value="" disabled selected>
Expense Type
</option>
<option value="Savings">Savings</option>
<option value="Investments">Investments</option>
<option value="Expenses">Expenses</option>
</select>
<label htmlFor="select">
{errorSelect ? "Please choose an expense type!" : ""}
</label>
<h2 className="">Tracking Expenses</h2>
<hr />
<div className={classes.wrapper}>
<div className={classes.formGroup}>
<input
type="text"
placeholder="Description"
name="description"
className={
errorDesc ? classes.descriptionError : classes.description
}
onChange={(e) => context.setDescription(e.target.value)}
/>
<label htmlFor="description">
{errorDesc ? "Please add a description!" : ""}
</label>
</div>
<div className={classes.formGroup}>
<input
type="text"
placeholder="Amount"
name="value"
className={errorVal ? classes.valueError : classes.value}
onChange={(e) => context.setValue(e.target.value)}
/>
<label htmlFor="value">
{errorVal ? "Please add a valid value!" : ""}
</label>
</div>
<div className={classes.formGroup}>
<input type="submit" className={classes.submit} />
</div>
</div>
</form>
);
};

Answer 1

When you're mapping over Object.keys(context), what you're actually mapping over is ["expenseType","description","value","setExpenseType","setDescription","setValue"], because these are the keys of the object your context provides
Because those are strings, key.expenseType and key.description are undefined.
From what I have read I am pretty sure you're trying to do something else, you probably want your context to provide an array of objects which you map over, something like
import { createContext, useState } from "react";
export const ExpenseContext = createContext();
export const ExpenseProvider = ({ children }) => {
const [expenses, setExpenses] = useState([]);
return (
<ExpenseContext.Provider
value={{
expenses, setExpenses
}}
>
{children}
</ExpenseContext.Provider>
);
};
Where the members of expenses are object with the properties of expenseType, description and value, am I correct?