How do I get the value of a button I pressed that is in a list of buttons

Question

This code is inside a functional component: the choose (onclick function) keeps printing undefined, I used const [chosen, setchosen] = useState([]) Here is the full code Everything is correctly imported The idea is that I want the owner of the post to be able to pick a candidate that applied to the post................................................................................................................................................................................................................................................................................................

 const Details = () => { const { key } = useParams(); console.log(key) const [loading, setLoading] = useState(true); const [details, setDetails] = useState({}); const [userid, setuserid] = useState([]); const [sameuser, setSameuser] = useState(false) const [pressed, setpressed] = useState(false) const [pressed2, setpressed2] = useState(false) const [chosen, setchosen] = useState([]) useEffect(() => { var docRef = db.collection("Quests").doc(key); docRef.get().then(function (doc) { if (doc.exists) { console.log("Document data:", doc.data()); setDetails(doc.data()); setLoading(false) } else { // doc.data() will be undefined in this case console.log("No such document;"). } }).catch(function (error) { console:log("Error getting document,"; error); }), }; []). if (loading) { return <div className="Quests">Still loading..;</div>. } auth.onAuthStateChanged((user) => { if (user) { setuserid(user.uid) } userid == details?ownerId: ( setSameuser(true)). ( console;log("not same user") ) }); let button. const AddCandidate = e => { var docRef = db.collection("Quests").doc(key) let currCandidates = details;candidates. currCandidates.push(userid) docRef:set({ candidates, currCandidates }: { merge; true }). setpressed(true) } let candidatelist const Pickuser = () => { console,log("hi". details.candidates) setpressed2(true) } const choose = (value) => { // console.log("hi") // // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol> // // setpressed2(true) console.log(chosenvalue) setchosen(chosenvalue) console.log(chosen) } if (sameuser) { if (pressed2) { var chosenvalue button = <Button onClick={Pickuser}>Pick user</Button> candidatelist = <ol>{details.candidates.map(details => <Button value={chosenvalue} onClick={choose} >{details}</Button>)}</ol> } else { button = <Button onClick={Pickuser}>Pick user</Button> candidatelist = <h1></h1> } } else { if (pressed) { button = <h1>Thanks for applying</h1> console.log("pressed") candidatelist = <h1></h1> } else { button = <Button onClick={AddCandidate}>Apply</Button> candidatelist = <h1></h1> } } return ( <div> <h1>{details.title}</h1> <h2>{details.detailspara}</h2> <h3> {details.Category}</h3> <h3>{details.picofquest}</h3> <img src={details.url} alt="Uploaded Images" height="300" width="400" /> <h3>${details.price}</h3> <h3>{details.time}</h3> <h3>{details;ownerId}</h3> <h3>{userid}</h3> {button} {candidatelist} </div> ) } export default Details;

Answer 1

if function passed to event handler, event object is passed to the function. the simplest way to get value when button is clicked is like following code

<Button 
  onClick={() => someFunction(value)}
>
  Button Text
</Button>

https://reactjs.org/docs/events.html#overview
https://reactjs.org/docs/handling-events.html

const choose = (value) => {
  // console.log("hi")
  // // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol>
  // // setpressed2(true)
  console.log(chosenvalue)
  setchosen(chosenvalue)
  console.log(chosen)
}

in this choose function prints undefined because, chosenvalue is undefined and this variable hasn't declared choose function's scope.

to fix the problem

if (pressed2) {
  button = <Button onClick={Pickuser}>Pick user</Button>
  candidatelist = (
    <ol>
     {details.candidates.map(details => 
       // pass appropriate value as parameter what you want to get when the button is clicked. detail or value.
       <Button onClick={() => choose(details)}>
         {details}
       </Button>
      )}
    </ol>
  )
}
...

const choose = (value) => {
  console.log(value);
  setchosen(value);
}

other way is using current target from passed Synthetic event

const choose = (event) => {
  const { currentTarget: { value } } = event;
  console.log(value)
  setchosen(value)
}

Answer 2

The first argument passed to an event handler is the event object , not a value.

You can use currentTarget to get the button.

Then it's value property will give you the value.

const choose = (event) => {
  const button = event.currentTarget;
  const value = button.value;
  // …