Getting current object data in react.js

Question

I have an array of objects.

Ex:

 data=[
  {
    name: 'Person1',
    age: 30,
    weight: 200
  },
  {
    name: 'Person2',
    age: 30,
    weight: 200
  },
  {
    name: 'Person3',
    age: 30,
    weight: 200
  }
]

I am mapping through the array and returning only the Person and age.

How can i get the full object data when I click on that person.

For example I am rendering the below.

I would like to console.log ALL the objects properties for the specific one I click.

I am trying to simplify this, I hope its not confusing.

 return(
    //This is a function that is mapping through the objects and printing out each objects Name and age only
    this.loopData()  
    )



 loopData = ()=>{
    return data.map(obj,i) =>{
    return(<h1 onClick={this.showme} key={i}>{obj.name}</h1>}
    }

I have the onlick as showme =() =>console.log(this)

If the info is there, under what label would I be looking for?

Answer 1

If you want to access object properties by a string value you can do:

var data = {
 Person1: {
  age: 22,
  weight: 180
 }
};

var _clickedid = "Person1";
var _clickedobj = data[_clickedid];
console.log(_clickedobj);

Answer 2

Using Array.prototype.find() you can get the person with name 'Person1' and age 30

Code:

 const data = [{name: 'Person1',age: 30,weight: 200},{name: 'Person2',age: 30,weight: 200},{name: 'Person3',age: 30,weight: 200}]; const person = data.find(p => p.name === 'Person1' && p.age === 30); console.log(person); 

Answer 3

From what I understand you are trying to achieve something like this, but I might be mistaken.

 const data = [ { name: 'Person1', age:30, weight:200 }, { name: 'Person2', age:20, weight:180 }, { name: 'Person3', age:10, weight:100 } ] const generateHtml = data => { const list = document.createElement('ul'); document.body.appendChild(list); for (let i = 0; i < data.length; i++) { let item = document.createElement('li'); item.textContent = data[i].name; list.appendChild(item) item.addEventListener('click', event => { console.log(data[i]); }); } } generateHtml(data); 

Answer 4

  On calling the below functional component renders a button with person name. Onclicking the person will log it in console

    const renderPerson = () => {
      let data=[
        {
          name: 'Person1',
          age: 30,
          weight: 200
        },
        {
          name: 'Person2',
          age: 30,
          weight: 200
        },
        {
          name: 'Person3',
          age: 30,
          weight: 200
        }
      ]


      return(
        <div>
          {data.map(person => (
             <button onClick={() => console.log(JSON.stringify(person))}>person.name</button>       
          ))}
        </div>
      )
    }

Answer 5

You should bind the person in the map loop to be able to get clicked person in you click handler function.

showPerson(person) {
  // do stuff 
  console.log(JSON.stringify(person))
}

render() {
  let data = [
    {
      name: 'Person1',
      age: 30,
      weight: 200
    },
    {
      name: 'Person2',
      age: 30,
      weight: 200
    },
    {
      name: 'Person3',
      age: 30,
      weight: 200
    }
  ];

  return(
    <div>
      {
        data.map(person => (
          <button
            onClick={this.showPerson.bind(null, person)}>
            person.name
          </button>       
        ))
      }
    </div>
  )
}