How get object from list with given id from props?

Active3 hr before
Viewed126 times

9 Answers


Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow ,Stack Overflow en español

Move this code

AUDIO = this.props.audios.find((sound) => {
   return === this.props.audioId;
load more v

Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it:,We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.,Below, we loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItems:

const numbers = [1, 2, 3, 4, 5];
const doubled = => number * 2);
load more v

 Pretag team - issue, fix, solve, resolve

It is often necessary to fetch a List of Objects like either List of Employees or List of Products or List of Posts from the Data Store and display them in our Application. In this article, we will understand how to deal with List of Objects in React.,Save these changes, lets navigate to the browser and we can see that Employee Details are being displayed.,Lets go ahead and create Array of Employee Objects.

Lets go ahead and create Array of Employee Objects.

const employees = [

      Id: 101,
      Name: 'Abhinav',
      Location: 'Bangalore',
      Salary: 12345

      Id: 102,
      Name: 'Abhishek',
      Location: 'Chennai',
      Salary: 23456

      Id: 103,
      Name: 'Ajay',
      Location: 'Bangalore',
      Salary: 34567

load more v

When creating a list in JSX, React may show you an error and ask for a key. ,These looping strategies are heavily used in our React applications. Always be sure to add a key when looping over things and you'll be in good shape!,Showing a list of items is crucial in every single application we'll build. Using JSX we can show lists using JavaScript's built-in method.

jsxfunction App() {
  const people = [
    { name: 'chris' },
    { name: 'nick' }

  return (
      { => (
load more v

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.,If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any selector.,Document reference for other methods and properties you can use to get references to elements in the document.

var element = document.getElementById(id);
load more v

Using jQuery's .attr() method to get the value of an element's attribute has two main benefits:,To change the alt attribute, simply pass the name of the attribute and its new value to the .attr() method:,Description: Get the value of an attribute for the first element in the set of matched elements.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>attr demo</title>  <style>  p {    margin: 20px 0 0;  }  b {    color: blue;  }  </style>  <script src=""></script></head><body> <input id="check1" type="checkbox" checked="checked"><label for="check1">Check me</label><p></p> <script>$( "input" )  .change(function() {    var $input = $( this );    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +      ".is( ':checked' ): <b>" + $ ":checked" ) + "</b>" );  })  .change();</script> </body></html>
load more v

If you want to get access to only a specific key-value pair, then it could be done as explained below.,For the change, you will get access to the array of objects and not the simple object, which contains a key-value pair.,Props are an ordinary object of React that follow the immutable properties. This simply means that you cannot change their value throughout the component. Props and states are in the form of an object, which contains the number of key-value pairs that could be used to render the value of the objects.

1 constructor() {
   2 super();
   3 this.state = {
      4 employee: {
         5 firstname: "FirstName123",
         6 lasttname: "LastName123",
         7 age: "31",
         8 city: "xyzcity",
         9 department: "marketing",
         10 joiningyear: "2015"
load more v

Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.,When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.,Note that it’s not recommended to use v-if and v-for together. Refer to style guide for details.

 Pretag team - issue, fix, solve, resolve

Other "props-object" queries related to "How get object from list with given id from props?"