What is the method for displaying the props value in console.log?

Recently, I started learning React and was tackling a simple project. Below is the code snippet that I have been working on. While working on it, I came across a situation where I needed to print the value of listItem={people} which is passed as props in my List component. So, to get a better understanding of what exactly is stored in listItem here, I attempted {console.log(listItem)} but unfortunately, it returned an 'undefined' error.

    *react*
   function App() {
  const [people, setPeople] = useState(data);


  return (
    <div className="container">
      <h3>{people.length} birthdays today</h3>
      <List listItem={people} />
      
      <button onClick={() => setPeople([])}>Clear All</button>

    </div>
  );
}

export default App;

Answer №1

When you include parameters in a component, they are passed as an object with the parameter name as the key and the assigned value.

In this example, I am using object destructuring to extract the listItem from the List Component's parameter object.

function List({ listItem }) {
  console.log(listItem)
  
  return <div>List Component</div>
}

Learn more about destructuring here.

Answer №2

Make sure to access the property first by using the code snippet below.

console.log(props.listItem)

For more information, take a look at the official React documentation

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

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

How to direct all wildcard paths to a particular route in Next.js

I currently have a single landing page application built with nextJs. I am wondering if it is possible to redirect all paths to specific routes, similar to how we do it in react-router. How can I achieve the same functionality in nextJs? <BrowserRou ...

Transitioning to webpack 5: Encountering an error - Unable to access the 'prototype' property of an undefined value

After spending several days attempting to fix this bug, none of the solutions I found online have been helpful. The issue arose after migrating from webpack version 4 to version 5. Here is the specific error that's occurring: https://i.stack.imgur.co ...

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

Is it best practice to contain all side effect logic within useEffect in React?

I am looking to monitor user clicks on a button and send the data to the server. I am considering where to implement the logic for "sending the data to server" within my component. Should I include it inside the onClick handler or should I move it to use ...

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

I'm having trouble getting my customized CSS to work properly in a WordPress theme that's using Bootstrap

Currently diving into the world of Wordpress development and creating my own theme. Utilizing bootstrap along with some custom CSS, but having trouble getting everything to work together in harmony. Below is a snippet of my functions code: <?php func ...

Numerous textareas fail to function properly according to JQuery's standards

Need help with resizing multiple textarea elements dynamically as the user types in them (on the Y-axis). Currently, I have code that successfully resizes a single textarea, but it does not work when there are multiple textareas on the page. Here is the c ...

Interactions with Various Servlets through Diverse Forms within a single JSP document

I am currently dealing with an index.jsp file that contains two different types of forms. <form action="searchpath" name="searchForm" method="get"> <p>BedType</p> <select name="bedType"> <jsp:include page="/WEB-INF/embed ...

What role does Next.js play within the realm of React development?

As a newcomer to React, I recently discovered Next.js. While I have a basic understanding that it is a popular tool among React developers, I am unsure of the specific issues it aims to solve within React development. Would anyone be able to provide some ...

Site's design compromised by AJAX refresh intervention

Every time I run this code, the page ends up repeating itself. Adding to that, it doesn't refresh as required. Here is how it should work: Image Updated code segment below: <?php include 'config.php' ?> <script language="javascr ...

transforming a JavaScript array into an object

output: Array(5) [ "Samsung", "Iphone", "Nokia", "Xiomi", "Blackberry" ] another output: Array(5) [ Object { id: "Samsung", label: "Samsung" },Object { id: "Iphone", label: ...

Preserving data and retrieving it

I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...

Center the element vertically if its height is less than the container's height, but let its height become 100% if the container's height is

I am trying to achieve a layout where an element (.figure) is centered horizontally when it is shorter than its container (.timeline-content), but matches the height of its container when longer. The height of the container changes based on its parent. T ...

Anticipate the middleware function to either invoke the next function or return a HTTP 400 status code

I am eager to delve into unit testing and am looking to test my Node API. I am utilizing Express with Typescript and Jest for testing. Prior to invoking the controller middleware, I apply the route input validation middleware to verify the validity of the ...

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

Exploring D3 to extract nested information and build an interactive navigation tree

Recently, I've been working with d3's zoom circle feature from here: The data I'm dealing with is structured as a json array with various levels of arrays and objects. object = { class: "show", name: "Game of Thrones", childre ...

Download File Submission Button

Searching for a submit button code that will save the data and initiate a file download with a single click. Can someone assist me with this request? ...

Retrieving data from a simulated angular service and making calls accordingly

I'm struggling with writing tests for a controller method that relies on an Angular service call and needs to test the code inside the .then() function afterwards. Here's the basic concept: // Controller $scope.myMethod = function() { meth ...