I'm having trouble adjusting the style of a circle component when it's selected by a button in another component. Both components need to change appearance upon selection, but I am facing issues with state management and feeling a bit overwhelmed. I've been attempting to use onClick functionality without much success. Any assistance would be greatly appreciated.
App.js
import "./App.css";
import CircleSelector from "./CircleSelector";
import Circles from "./Circles";
class App extends Component {
constructor(props) {
super();
this.addActiveClass = this.addActiveClass.bind(this);
this.state = {
active: false
};
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
}
render() {
return (
<div className="App">
<header className="App-header">test </header>
<main>
<CircleSelector
className={this.state.active ? "selected" : null}
onClick={this.toggleClass}
/>
<Circles />
</main>
</div>
);
}
}
export default App;
CircleSelector.js
import React from "react";
function CircleSelector(props) {
return (
<div className="CircleSelector">
<button className="selected">Select Circle 1</button>
<button>Select Circle 2</button>
<button>Select Circle 3</button>
<button>Select Circle 4</button>
</div>
);
}
// Must export the component's function (or class)
export default CircleSelector;
Circles.js
import React from "react";
function Circles(props) {
return (
<div className="Circles">
<div className="selected">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
);
}
// Must export the component's function (or class)
export default Circles;
App.css
body,
* {
box-sizing: border-box;
}
.App {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.App-header {
width: 100%;
padding: 20px;
font-size: 24px;
background-color: grey;
color: white;
text-align: center;
letter-spacing: 3px;
}
.App main {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
}
.CircleSelector {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 200px;
width: 150px;
border: 4px solid purple;
border-radius: 8px;
margin-right: 20px;
}