get value of list item with click event in React

Question

I have two components which displaying
each element of const elementObjects = [{id: 1, Element: "Orange", Weight: 55}, {id:2, Element: "Banana", Mass: 20}]; in an unorderd list I want to log the value of a list item to the console if clicked

return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;

when clicked the eventHandler return 0 instead of Orange how can I get the desired behavior ?


function ListItem(props) {
    // --> displays the data / is reusable
  return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;
}

function ChooseElements() {

  const listItems = elementObjects.map((object) =>
  
    <ListItem key={object.id.toString()} value={object.Element} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}


ReactDOM.render(
  <ChooseElements />,
  document.getElementById('root')
);

Try props.value (the value of the value prop) instead of e.target.value (the value of the value attribute of the li HTML element, which is unlikely to be anything interesting, since you haven't set it to anything interesting. — Heretic Monkey
– Heretic Monkey, Commented May 2, 2021 at 18:10

Ali Klein · Accepted Answer · 2021-05-02 18:19:28Z

3

You don't need e.target. Your value is coming from your props. Your ListItem should look like this to log the value once clicked:

function ListItem(props) {
  return <li onClick={() => console.log(props.value)}>{props.value}</li>;
}

answered May 2, 2021 at 18:19

Ali Klein

1,91815 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JustRaman · Accepted Answer · 2021-05-02 18:11:54Z

0

here you go. use props.value for onClick


function ListItem(props) {
  return <li onClick={()=> console.log(props.value)}>{props.value}</li>;
}

answered May 2, 2021 at 18:11

JustRaman

1,1719 silver badges12 bronze badges

Comments

asci · Accepted Answer · 2021-05-02 18:13:14Z

0

Can you use value from props instead of event target?

Something like this:

function ListItem(props) {
  return <li onClick={() => console.log(props.value)}>{props.value}</li>;
}

?

answered May 2, 2021 at 18:13

asci

2,5704 gold badges17 silver badges15 bronze badges

Comments

Abhishek Sharma · Accepted Answer · 2021-05-02 18:13:33Z

0

li elements don't specifically have e.target.value So you'll have to console.log props.value

function ListItem(props) {
    // --> displays the data / is reusable
  return <li onClick={(e)=> console.log(props.value)}>{props.value}</li>;
}

answered May 2, 2021 at 18:13

Abhishek Sharma

2032 silver badges11 bronze badges

Comments

Maccabeus · Accepted Answer · 2021-05-02 18:17:00Z

0

You could simply pass the props.value to the onClick event handler and there won't be a need for e.target.value.

answered May 2, 2021 at 18:17

Maccabeus

891 silver badge6 bronze badges

Collectives™ on Stack Overflow

get value of list item with click event in React

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related