Changing the button name without changing all buttons names

Question

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>
)

Answer 1

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>
)

Answer 2

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

Answer 3

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

Answer 4

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>)}