score:2
the error can be in the variable you are using to check i.e playbuttonflag
. it is better to use it via state: react does not re-render when a common variable's value is changed.
a little help for you using an example below:
import react, {usestate} from "react";
export default function app() {
const [btntext, setbtntext] = usestate("hello!");
const [flag, setflag] = usestate(false);
const changebtntext = () => {
if(!flag)
setbtntext("how are you!");
else
setbtntext("hello!");
setflag(!flag);
}
return <div>
<button value={btntext} onclick={changebtntext}>{btntext}</button>
</div>;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
score:0
you can do it with object in a simple way
import { usestate } from "react";
import "./styles.css";
const button_text = {
"hello!": "how are you!",
"how are you!": "hello!"
};
const panel = () => {
const [btntext, setbtntext] = usestate("hello!");
const changebtntext = () => {
setbtntext(button_text[btntext]);
};
return (
<div>
<button name={btntext} onclick={changebtntext}>
{btntext}
</button>
</div>
);
};
export default function app() {
return (
<div classname="app">
<panel />
</div>
);
}
score:0
your flag let flag: boolean = false;
variable will be re-initialized with false
after re-render. there is a possible chance that playbuttonflag
might be the problem. it is better to maintain a state, if you really want that flag
to render changes.
const panel = () => {
const [btntext, setbtntext] = usestate("hello!");
const [flag,setflag] = usestate(false);
const changebtntext = () => {
setbtntext(!flag ? "how are you!" : "hello!");
setflag(currentflag => !currentflag)
}
return (
<div>
<button name={btntext} onclick={changebtntext} />
</div>
);
};
or you can set the button text based on the current text of the button
const panel = () => {
const [btntext, setbtntext] = usestate("hello!");
const changebtntext = () => {
setbtntext(btntext === "hello!" ? "how are you!" : "hello!");
}
return (
<div>
<button name={btntext} onclick={changebtntext} />
</div>
);
};
Source: stackoverflow.com
Related Query
- React onClick event working on twice clicks when clicking again
- React onClick event not firing when function is passed to child
- React onClick event handler not working using Next.js
- onClick event fired before clicking in react
- OnClick not working when rendering React button on a custom dialog
- Why React component is launching onClick event on render, but not when clicked?
- Close tooltip when clicking again on it in React
- onClick event handler not work as expected when attached to SVG Icon in React
- React form elements onchange event not working when generated dynamically
- onClick event not working within nested React / Next.js component
- setting react state when clicking on a functional component via onClick (TypeScript)
- Safari onClick event to focus() not working in React
- Binding event handlers in React Components fires onClick when rendered
- onClick event in React parent component is not working
- React onClick Event Not Working
- onClick event not working with option tag in React
- OnClick event not working in map function react
- React big calendar, render component when clicking on an event
- React is not rendering the information when onClick event
- I'm working with React Route, and I have a random string, but when I do click on the link page works but when a do click again doesn't work
- Div onClick function doesn't work when clicking in React app
- Passing event parameter when clicking a div in React
- React / Material-UI onClick event trigger more than once when use in data.map() Loop
- Keydown event not working as same as onClick in React
- Hamburger Transitions not working in react and onClick event too
- Prevent Clicking Again When Submitting Form in React
- How to adjust the onClick event of react.children when child is a react component not a DOM element
- React ajax call when button onClick event using hooks
- React - Child onClick event doesn't trigger when binding parameters
- React - onClick returns 'null undefined' when Clicking on <li>
More Query from same tag
- React KeyDown event handler in compnent - function error
- Why isn't useState() hook working as expected?
- React Link tag changes the url but doesnt render the component
- Ant Design Form validation required field
- React doesn't render autocomplete off
- Memory leak issue when trying to update state in useEffect (React Native)
- How to create a function with a typed callback which ensures all callback parameters are passed to it
- how to pass value with bindActionCreators?
- React ES6 alternative for mixins
- React - how to trigger preventDefault() before the synthetic event is recycled?
- how to disable a button if more than once check box is checked in React JS
- React hook state not change in recursion
- error description from http error code - react.js/javascript
- react router to be used as the child of <Routes> element error
- How do i get and apply today value with moment.js?(react.js)
- IonReactRouter not rendering IonPage
- How do I pass down function from parent component to child component in React
- How to prevent my images from disappearing
- Styling react component in styled components
- useEffect has missing dependency
- Redux - application state has the name of reducer as key
- ReactDOM.render doesn't work in getUserConfirmation
- updating an array in state
- jump to specific time in videojs using react hooks
- React Big Calendar (w/Typescript) not showing events
- On API Call, I want to display the data in table
- React Redux - How do I build a form with material-ui that I can add inputs to?
- axios request token returns null when refreshing page
- GraphQL use field value as variable for another query
- How to process mouseMove event in parent in React?