The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

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;

Answer №1

To iterate through the array containing your data, utilize map in the following manner:

<div className="row border border-1 border-end-0 border-start-0 border-top-0">

{invoicenumber && invoicenumber.map(item => {
  return (
    <div className="col-4">{item.invoice}</div>
    <div className="col-8 margin__adjust">{item.notes}</div>
)}
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to use jQuery's get function to load multiple files at once?

I am attempting to use jQuery's get function to load multiple files. Here is a basic example of what I am trying to achieve: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

Using the keyof lookup in a Typescript interface is a powerful way to

I'm looking for a solution similar to: interface Operation<T, K extends keyof T> { key: keyof T; operation: 'add' | 'remove'; value: T[K]; } but without the necessity of passing K as a template. Essentially, I want to ...

Converting JSON object settings to a string causes an error as it is not a valid function

For my project, I have been provided with a JSON object that contains various settings, some being strings and others booleans. One thing I am struggling with is adding an animation name from the object that is stored in a variable. aniFx.move(inner, { ...

Issue encountered while attempting to create entity in jhipster

After executing the creation of an entity in the command line, JHipster successfully generated Java and script files but encountered issues with updating the database. No new table was inserted despite starting MySQL and turning off the application befor ...

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

Trigger a Component in React with the Click of a Button

Seeking guidance on how to trigger a component (FetchData) - a pop-up grid with an API call, using a Button click. Inexperienced with JavaScript and working with Material UI drawer. Any insights or suggestions on what might be missing in the code? class ...

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

If you don't get the correct response from the $.ajax success function

I am utilizing the $.ajax function to retrieve content, however I am encountering an issue when attempting to display special tags from it. The data appears to be missing! This is how I am currently handling it: $(document).ready(function(){ $("button") ...

Improving the visualization of large GPS tracks on Google Earth Plugin

I need to display GPS routes on Google Earth using the Google Earth API. However, with approximately 20,000 points per route, the performance is not optimal. The code I have implemented successfully draws the tracks but struggles with rendering time and tr ...

Having trouble with PHP form not functioning correctly?

Is there a way to display the var_dump with the 'selected country' information? I am having trouble due to an issue with the $res (array) $id. <?php if(isset ($_POST['submit'])) { $id = $_POST['cata']; $api = new ...

Dropdown menu utilizing processing API and interacting with AJAX and DOM manipulation

My API data is not showing up in the dropdown menu. If I use ?act=showprovince, I can see the result. example.html <head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" hr ...

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

Updating a singular value in an array using jQuery/JavaScript

Within a Javascript function, I have created an array called HM_Array1. The contents of the array are listed below: HM_Array1 = [[,11,147,,,,,,,1,1,0,0,0,1,"csiSetBorder(this)","null",,,true,["&nbsp;&nbsp;&nbsp;Accoun&nbsp;&nbsp;& ...

Exploring the isolate scope within a compiled directive

I successfully managed to compile a directive using this piece of code: let element, $injector, $compile, link, scope; element = angular.element(document.getElementById(#whatever)); $injector = element.injector(); $compile = $injector.get('$compile& ...

Waiting for data to be passed from a parent component within a method

I have a situation where I need to make an API call in my layout and send the received data as an object to my component. The problem arises because the object is empty when the method is called inside the mounted() function. Therefore, I want to execute ...

Running a NodeJS Redux example of a Todo List

While browsing through the Redux documentation, I stumbled upon an example app located here. I have a question about how to run this example app on a Node.js server and preview the results in a browser. Would it be better to use Express.js as the framewo ...

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

Using React hook form to create a Field Array within a Dialog component in Material UI

I have a form with custom fields added via Field Array from react-hook-form, and everything is functioning properly. However, I recently implemented drag and drop functionality for the property items to allow reordering them. Due to the large number of fie ...

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...