score:2
Accepted answer
import React, { Component } from 'react'; class Page extends Component { constructor(props){ super(props); this.state={color:"black"} } render() { return ( <div> <div style={{ background: "#f0f0f0f" }}> <h3 style={{ color: this.state.color }}>Heading</h3> <p style={{ color: '#706c61' }}> This is a text...</p> </div> <div> <button onClick={()=>this.setState({color:"white"})}> White </button> <button onClick={()=>this.setState({color:"purple"})}> Purple </button> <button onClick={()=>this.setState({color:"red"})}> Red </button> <button onClick={()=>this.setState({color:"green"})}> Green </button> </div> </div> ); } } export default Page;
score:2
<button onClick={() => this.setState({ heading: "green" })}> {" "} Green{" "}
Source: stackoverflow.com
Related Query
- How to change the background and text color within button using button onClick in React JS
- How to change button background color and text color using setSate in react?
- How to change the text color and background color of ant-tooltip component
- how to change background color when I click the button using react hooks
- How to individually change text color and font weight in the same div element using Tailwind CSS and React
- How to make a filter component like Google chrome find (Cntrl + F) that detects the text and change it's background color
- How to change button background color when I click the button in React using Hooks
- Using a button to change the color of text
- how to change the font color, font size, and button color in React
- MaterialUI: Why does setting background color on Select component hides the InputLabel text and how could I avoid it happening?
- How to change background color of button using react
- How to change the background or text color of the countdown timer to green when there is only 30 minutes remaining to finish the countdown?
- How to change the background color of the div while focusing the text Input field?
- How to change the background color of react-bootstrap's switch (part of the Forms component) using Emotion
- how to change the background color of a button without affecting the other buttons in React JS
- how to send a user onClick event to different endpoint urls based on the button clicked using ReactJS and Axios
- How to change color for the numbers based on its value using javascript and react?
- How To Change the Color and Font Of Labels of Bar Chart Using ChartistJs Library with ReactJs
- ReactJS: How to make button background colour change when the text inside it is a certain value
- onClick Button Text Change for the particular card using ID from REST API
- How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS
- how i can change background color of full page using onclick event in reactjs?
- How to change the color of a transparent background image's text in react native?
- I'm using MUI-Data-Tables and I would like to change the header text color after I click to sort the Column?
- How to change text color depends on the text value using javascript for reactjs web applicatiion?
- How to implement Elasticsearch update_by_query that change the value of Boolean field using react button onClick
- How to change color , background and height of the particle background in react-tsparticles?
- How to change the signal button background color in 10 buttons?
- How to change background color of button onClick in react js?
- I want to change text color using class and onclick function but onclick function not working?
More Query from same tag
- ReactJS onclick toggle class event multiple times
- Check if Contains in Array in React
- how to use webpack and web3 in react?
- Waiting for call to finish and then dispatch action in saga
- Passing Arguments to a React Element in a React Router
- <fieldset> breaking onChange in React form
- Kendo UI Upload button
- Meteor React - Why are React Components defined differently in React Mounter vs React Layout from Kadira?
- React PayPal Checkout
- Modifying & Duplicating File Object in React
- req.body comes empty in delete operation
- Switch to next video from Youtube API (React)
- I want a simple authentication with bearer token and rest api which should be stored in local storage and be refresh in given time in REACT
- How to test a click event with enzyme in a React component's dangerouslySetInnerHTML content
- TypeError: elements is not iterable
- Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
- AnchorEL component is invalid after a method is called the first time
- How can I check if current user is part of a sharepoint group with PnPJS?
- How to open a canvas as an image in a new tab with Reactjs
- Dropdown Item not making api call on first try
- React native asyncstorage not working properly
- Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at App.js:18:1 in console
- How to call a parent function from a child - react-native
- Using Map To Create Components - but functions are tied to each other
- Why does my React component display incorrect data when filtering by values controlled by useState()?
- Standalone function and class based function
- How can I dynamically add more textfields according to what the user has entered?
- How to convert data array object to file JSON and use this file to send requests to the S3 server in ReactJS?
- Drag and drop area with react-dnd
- How to use styled-components in react component