Entonces, estoy tratando de crear una aplicación básica de generador de facturas, he creado una matriz de objetos de los datos en el archivo App.js que se ve así. Si paso los datos del archivo App.js usando accesorios, la parte de "notas" no se envuelve, sino que desborda su contenedor.

 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;

Aquí es donde se mostrará el contenido, tenga en cuenta que también estoy usando Bootstrap. Sin embargo, si escribo el contenido normalmente en la parte de "notas", se envuelve solo. ¿Cómo puedo solucionar esto?

 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;