Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me!
In my project, there are 9 buttons, each triggering the display of a different image upon being clicked. This functionality is already in place and working flawlessly. However, I now require each button to also showcase distinct text content, which I'm struggling with...
Here's a snippet of the code:
var Form = React.createClass({
getInitialState: function(){
return {
shirtState:'button',
image:null,
color:'white',
colornotice: 'white shirt temp',
shirtName:'',
bandName:'',
bandcampUrl:''
}
},
handleColorChange: function(e){
e.preventDefault();
color = e.target.value
this.setState({color: color, colornotice: color +' THIS TEXT SHOULD VARY FOR EACH BUTTON'})
},
The part where it says "THIS TEXT SHOULD VARY FOR EACH BUTTON" needs to dynamically change depending on the button clicked.
Below are the buttons:
<div className="buttons">
<button className="color color-white" onClick={this.handleColorChange} value="white"></button>
<button className="color color-black" onClick={this.handleColorChange} value="black"></button>
<button className="color color-blue" onClick={this.handleColorChange} value="blue"></button>
<button className="color color-green" onClick={this.handleColorChange} value="green"></button>
<button className="color color-orange" onClick={this.handleColorChange} value="orange"></button>
<button className="color color-pink" onClick={this.handleColorChange} value="pink"></button>
<button className="color color-purple" onClick={this.handleColorChange} value="purple"></button>
<button className="color color-red" onClick={this.handleColorChange} value="red"></button>
<button className="color color-yellow" onClick={this.handleColorChange} value="yellow"></button>
</div>
Each button should contain predefined text that replaces the current placeholder:
{this.state.colornotice}The changes in images triggered by the button clicks mentioned earlier are controlled in the CSS, which is functioning correctly. Here's a segment of it:
.color-blue{
background: #fff image-url("Blue-Transparent_2300x2415.png");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
This pattern continues for all 9 buttons.
I trust this explanation is clear. Thank you for any assistance you can provide!