CODEWITHSUNDEEP
javascriptreactjs
ABHINEET SINGH
ABHINEET SINGH

Reputation: 65

Trying to grab a prop value of a list item

I'm trying to grab the value of amount prop and the years prop, but getting undefined using the below code. I have included the list item image from which I want to grab the prop values

let temp1;
if(amount !== null){
  temp1 = amount.map((amount,i) => {
    return(
      <li onClick={getValue.bind(this)} key={i} amount={amount.amount} years={amount.years}> 
        Amount: {amount.amount} Years: {amount.years} 
      </li>
    )
  })
}

function getValue(e){
  console.log(e.target.amount);   //change needed
  console.log(e.target.years);   //change needed
}

Upvotes: 2

Views: 121

Answers (3)

giuseppedeponte
giuseppedeponte

Reputation: 2391

It does not work because the e argument in your getValue function is a normal DOM event object and doesn't know anything about React. It does know about your rendered HTML element attributes, but amount and years are not valid HTML attributes. One way around this is to use plain HTML data attributes, like this:

let temp1;
if (amount !== null) {
    temp1 = amount.map((amount, i) => {
        return (
            <li onClick={getValue.bind(this)} key={i} 
                data-amount={amount.amount} 
                data-years={amount.years}> 
                Amount: {amount.amount} Years: {amount.years} </li>
        )
    })

}


function getValue(e) {
    console.log(e.target.dataset.amount);
    console.log(e.target.dataset.years);
}

For more info about data-* attributes, cf. this MDN page

Upvotes: 0

varun agarwal
varun agarwal

Reputation: 1509

You can change your click listener to 

<li onClick={() => getValue.bind(this, amount)} key={i} />




function getValue(amount){
  console.log(amount.amount);
  console.log(amount.years);
}

Upvotes: 0

teimurjan
teimurjan

Reputation: 1975

You should use getAttribute method.

const amounts = [{ amount: 11, years: 10 }];

const App = () => {
  return amounts.map(({ amount, years }, i) => {
    return (
      <li onClick={getValue} key={i} amount={amount} years={years}>
        Amount: {amount} Years: {years}
      </li>
    );
  });
};

function getValue(e) {
  console.log(e.target.getAttribute('amount')); //change needed
  console.log(e.target.getAttribute('years')); //change needed[enter image description here][1]
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

However, it's not a good way to do so. It'll be better to bind values to on click like:

const amounts = [{ amount: 11, years: 10 }];

const App = () => {
  return amounts.map(({ amount, years }, i) => {
    return (
      <li key={i} onClick={() => getValue({ amount, years })}>
        Amount: {amount} Years: {years}
      </li>
    );
  });
};

function getValue({ amount, years }) {
  console.log(amount); //change needed
  console.log(years); //change needed[enter image description here][1]
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions