Changing the button name without changing all buttons names-CodePudding

I have a button Name, by clicking on it the name changes to Stop. For this I am just using useState where passing false/true when it's clicked. Everything works well, but if I add another button and click on it, the name of all buttons change to Stop. How to prevent this action and change only the name of clicked button?

const [isPlaying, setIsPlaying] = useState(false)

function playName(){
   setIsPlaying(!isPlaying)
........
}

function playAge(){
   setIsPlaying(!isPlaying)
........
}
return(
<div>
<button
  id="btnName"
  onClick={playName}
  type="button">
  {isPlaying ? 'Stop' : 'Name'}
</button>
<button
  id="btnAge"
  onClick={playAge}
  type="button">
  {isPlaying ? 'Stop' : 'Age'}
</button>
</div>
)

CodePudding user response：

You are trying to use only one single boolean value to control multiple buttons' states, which is absolutely impossible.

One way to achieve this is to have a state storing the name of the button that is playing.

Try something like this:

const [playingBtnName, setPlayingBtnName] = useState('')

function playName(){
   setPlayingBtnName('name')
........
}

function playAge(){
   setPlayingBtnName('age')
........
}
return(
<div>
<button
  id="btnName"
  onClick={playName}
  type="button">
  {playingBtnName === 'name' ? 'Stop' : 'Name'}
</button>
<button
  id="btnAge"
  onClick={playAge}
  type="button">
  {playingBtnName === 'age' ? 'Stop' : 'Age'}
</button>
</div>
)

The way above does not allow two buttons playing at the same time. If you want multiple buttons be be playing at the same time, you can use an array to store all those names playing:

const [playingBtnNames, setPlayingBtnNames] = useState([])

function playName(){
   setPlayingBtnNames([...playingBtnNames, 'name'])
........
}

function playAge(){
   setPlayingBtnNames([...playingBtnNames, 'age'])
........
}
return(
<div>
<button
  id="btnName"
  onClick={playName}
  type="button">
  {playingBtnNames.includes('name') ? 'Stop' : 'Name'}
</button>
<button
  id="btnAge"
  onClick={playAge}
  type="button">
  {playingBtnNames.includes('age') ? 'Stop' : 'Age'}
</button>
</div>
)

CodePudding user response：

try this code:

const [isPlaying, setIsPlaying] = useState(false)


function playName(event){
   setIsPlaying(e.event.target)
........
}

function playAge(event){
   setIsPlaying(e.event.target)
........
}
return(
<div>
<button
  id="btnName"
  onClick={playName}
  type="button">
  {isPlaying === false ? 'Stop' : 'Name'}
</button>
<button
  id="btnAge"
  onClick={playAge}
  type="button">
  {isPlaying === false ? 'Stop' : 'Age'}
</button>
</div>
)

CodePudding user response：

I think this will work for you:

const [isPlaying, setIsPlaying] = useState(false)

function playName(){
   setIsPlaying(true)
........
}

function playAge(){
   setIsPlaying(true)
........
}

if(isPlaying){
return(
<div>
<button id="btnName"
  onClick={()=>{return;}}
  type="button">
Stop
</button>
<button
  id="btnAge"
  onClick={()=>{return}}
  type="button">
Stop
</button>
</div>
)}
return(
<div>
<button>
<button id="btnName"
  onClick={()=>{return;}}
  type="button">
Name
</button>
<button
  id="btnAge"
  onClick={()=>{return}}
  type="button">
Age
</button>
</button>
</div>
)

What I changed:

I switched what you did(Changing the button's name by making a direct comparison) and made it conditional rendering. This approach is better because every time you change/update the state react will rerender the component and make the condition true. If this does not work, I think it's most likely that you have a problem with your other code. Make sure to have a good look at it if that happens.

I Hope This helps you!

PS: Sorry if your code is a little messed up

CodePudding user response：

you need to use separate variables for this. but it is not recommended.

since using single variable results in changing all button property.

you can use object of Boolean values to store all the button properties

refer:

https://codesandbox.io/s/dry-sun-isjzyl?file=/src/App.js

CodePudding user response：

The solutions provided dont seem a scalable one, perhaps you could find this a more viable option for a long term usage

const [isPlaying, setIsPlaying] = useState([false,false])
const [buttonNames,setButtonNames] = useState([{name:'Name'},{name:"Age"}]);
const onClickPlayButton=(index)=>{
  setIsPlaying(isPlaying.map((e,_i)=>_i==index?!e:e));
}
<button id="btnName"
  onClick={()=> setIsPlaying(isPlaying.map((e)=>false))}
  type="button">
Stop
</button>
{buttonNames.map((e,_idx)=><button
  id="btnAge"
  onClick={()=> onClickPlayButton(_idx)}
  type="button">{isPlaying[index]?e.name:'STOP'}
</button>)}