As I work on developing a basic invoice generator application, I encounter an issue with overflowing content in the "notes" section when passing data through props from the App.js file. Instead of wrapping the text, it overflows its container.
import "./App.css";
import InvoiceItem from "./InvoiceItem";
import InvoiceList from "./InvoicesList";
function App() {
const invoices = [
{
invoice: 13491,
notes: "ndjdkjdkjdbkdbdkjbdkjdbkjb",
name: "Rahul's tax filing",
rate: 20,
quantity: 10,
total: 100,
},
{
invoice: 1235,
notes: "lorem ipsum",
name: "jdndkjndkjnd",
rate: 20,
quantity: 5,
total: 100,
},
{
invoice: 1236,
notes: "lorem ipsum",
name: "jdndkjndkjnd",
rate: 20,
quantity: 5,
total: 100,
},
{
invoice: 1341,
notes: "lorem ipsum",
name: "jdndkjndkjnd",
rate: 20,
quantity: 5,
total: 100,
}
]
return <div className="App">
<InvoiceList invoicedata={invoices}></InvoiceList>
</div>;;
}
export default App;
This is the area where the content will be displayed; please note that Bootstrap is also being used. Interestingly, if I enter content directly into the "notes" part without using props, the text wraps properly. How can I resolve this issue?
import "./InvoiceItem.css";
function InvoiceItem(props) {
return (
<div className="container custom__width border border-2 rounded mt-2 mb-2">
<div className="row border border-1 border-end-0 border-start-0 border-top-0">
<div className="col-4">{props.invoicenumber}</div>
<div className="col-8 margin__adjust">{props.addnotes}</div>
</div>
<div className="row mt-4">
<div className="col-6">Item Name</div>
<div className="col-2">Rate</div>
<div className="col-2">Quantity</div>
<div className="col-2">Total</div>
</div>
<div className="row mt-4">
<div className="col-6">{props.name} </div>
<div className="col-2">{props.rate}</div>
<div className="col-2">{props.quantity}</div>
<div className="col-2">{props.total}</div>
</div>
</div>
);
}
export default InvoiceItem;