Determining the Clicked Button in ReactJS

Question

Determining the Clicked Button in ReactJS

I need help with a simple coding requirement that involves detecting which button is clicked. Below is the code snippet:

import React, { useState } from 'react'

const App = () => {
  const data = [
    ['Hotel 1A', ['A']],
    ['Hotel 1B', ['B']],
  ]

  const [sameText, setSameText] = useState(false)

  const changeText = (e: any, index: number, item: any) => {
    console.log(e.target.value)
    console.log(index)
    console.log(item)

    if ((item[e.target.value] == item[index])) {
      setSameText(true)
    }
  }
  return (
    <div className='mx-auto'>
      <div className='flex p-16'>
        {data.map((item, index) => (
          <div className='mx-16' key={index}>
            <div className='p-12'>
              <button onClick={(e) => changeText(e, index, item)} value={index}>
                {item[0]}
              </button>
              <div>{sameText ? 'C' : item[1][0]}</div>
            </div>
          </div>
        ))}
      </div>
    </dev>
  )
}

export default App

The provided code will output text as follows:

Hotel 1A      Hotel 1B
A             B

If I click on Hotel 1A, I want 'A' to be changed to 'C,' and if I click on Hotel 1B, only 'B' should change to 'C.' Despite my efforts to retrieve the button's value, I couldn't make it work.

Any assistance would be highly appreciated.

javascript reactjs typescript

Answer 1

Answer №1

Firstly, make sure you are using item[index] instead of item[e.target.value] in the if statement and change the assignment operator from = to ===
Secondly, it is important to maintain separate states for each button instead of one shared state

If you need a working example, here is some code:

const [isTextMatching, setIsTextMatching] = useState([false, false]);

  const checkText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      const newState = [...isTextMatching];
      newState[index] = true;
      setIsTextMatching(newState);
    }
  };

For multiple hotels, you can use:

const [selectedHotel, setSelectedHotel] = useState(null);

  const checkText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      setSelectedHotel(index);
    }
  };

Answer 2

Firstly, make sure you are using item[index] instead of item[e.target.value] in the if statement and change the assignment operator from = to ===
Secondly, it is important to maintain separate states for each button instead of one shared state

If you need a working example, here is some code:

const [isTextMatching, setIsTextMatching] = useState([false, false]);

  const checkText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      const newState = [...isTextMatching];
      newState[index] = true;
      setIsTextMatching(newState);
    }
  };

For multiple hotels, you can use:

const [selectedHotel, setSelectedHotel] = useState(null);

  const checkText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      setSelectedHotel(index);
    }
  };

Answer 3

Answer №2

To effectively manage the state of each button and update it upon click, you will need to implement a mechanism where the buttons are displayed based on their current state.

Here is an example solution:

Create a state variable using

const [buttonState, setButtonState] = useState(data);

Iterate through buttonState instead of data when rendering the buttons
In the changeText() function, modify the button state as needed by invoking setButtonState()

Answer 4

To effectively manage the state of each button and update it upon click, you will need to implement a mechanism where the buttons are displayed based on their current state.

Here is an example solution:

Create a state variable using

const [buttonState, setButtonState] = useState(data);

Iterate through buttonState instead of data when rendering the buttons
In the changeText() function, modify the button state as needed by invoking setButtonState()

Answer 5

Answer №3

You seem to be utilizing nested arrays within the items array.

You are very close to the desired outcome and have implemented it correctly; console.log(item[1][0]) will provide you with the result.

There is just one more step you need to take, which is outlined below:

import React, { useState } from 'react'

const App = () => {
  const data = [
    ['Hotel 1A', ['A']],
    ['Hotel 1B', ['B']],
  ]

  const [sameText, setSameText] = useState(false)

  const changeText = (e, index, item) => {
    console.log(item[1][0])

    // if ((item[e.target.value] = item[index])) {
    //   setSameText(true)
    // }
  }
  return (
    <div className='mx-auto'>
      <div className='flex p-16'>
        {data.map((item, index) => (
          <div className='mx-16' key={index}>
            <div className='p-12'>
              <button onClick={(e) => changeText(e, index, item)} value={index}>
                {item[0]}
              </button>
              <div>{sameText ? 'C' : item[1][0]}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

Answer 6

You seem to be utilizing nested arrays within the items array.

You are very close to the desired outcome and have implemented it correctly; console.log(item[1][0]) will provide you with the result.

There is just one more step you need to take, which is outlined below:

import React, { useState } from 'react'

const App = () => {
  const data = [
    ['Hotel 1A', ['A']],
    ['Hotel 1B', ['B']],
  ]

  const [sameText, setSameText] = useState(false)

  const changeText = (e, index, item) => {
    console.log(item[1][0])

    // if ((item[e.target.value] = item[index])) {
    //   setSameText(true)
    // }
  }
  return (
    <div className='mx-auto'>
      <div className='flex p-16'>
        {data.map((item, index) => (
          <div className='mx-16' key={index}>
            <div className='p-12'>
              <button onClick={(e) => changeText(e, index, item)} value={index}>
                {item[0]}
              </button>
              <div>{sameText ? 'C' : item[1][0]}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

Determining the Clicked Button in ReactJS

Answer №1

Answer №2

Answer №3

Similar questions

The Vue.js component appears to be hidden within the Swal.fire HTML

Switch up the blogs displayed depending on the category chosen using React

Step-by-step guide on programmatically closing the Material-UI DropDownMenu

My jQuery form is not functioning properly upon initialization

Creating a seamless navigation experience using Material UI's react Button and react-router-dom Link

What is the best way to change the content in a textarea field?

Redirecting to a new page in JavaScript as the clock nears the top of the hour after 5 minutes

Initial binding of Angular2 ControlGroup valueChanges event

What is causing all the React components to adjust their heights simultaneously instead of just one

How can AngularJS apps handle authentication?

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Troubleshooting: Why isn't my React useState function merging two arrays as

Transforming the text to be "unreadable"

What steps do I need to follow in Material-UI to establish a nonce for the Content-Security-Policy?

The issue with ng-select arises when the placeholder option is selected, as it incorrectly sends "NULL" instead of an empty string

Angular Bootstrap UI - Ensuring only one element collapses at a time

ng-click is not triggering my function

Prevent key input in Material UI TextField

Leveraging split and map functions within JSX code

"Exploring the use of conditional rendering in React to dynamically hide and show components based