Recently delving into the world of Reactjs, I've created a component that I'm eager to enhance with CSS :)
This component consists of a few buttons and boxes that are revealed when a button is clicked.
class Days extends React.Component {
constructor(props) {
super(props);
this.state = { showComponent: "Box1" };
}
toggleDiv = name => {
if (name === "monday") {
this.setState({
showComponent: "Box1"
});
} else if (name === "thursday") {
this.setState({
showComponent: "Box2"
});
}
};
render() {
return (
<div>
<button onClick={() => this.toggleDiv("monday")}>
<div className="botun">Monday</div>
</button>
{this.state.showComponent === "Box1" && <Box1 />}
<button onClick={() => this.toggleDiv("thursday")}>
<div className="botun">Thursday</div>
</button>
{this.state.showComponent === "Box2" && <Box2 />}
</div>
);
}
}
class Box1 extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<h1>Box1</h1>
</div>
</div>
</div>
);
}
}
class Box2 extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<h1>Box2</h1>
</div>
</div>
</div>
);
}
}
https://i.sstatic.net/1XkBZ.png
Upon clicking button1, the corresponding boxes will be displayed beneath.
My query is how to group all buttons and boxes into a single container and style it similar to the provided screenshot?
If I embed it in my landingpage.js like this
<div className="container">
<div className="row">
<Days />
</div>
</div>
How can I ensure the buttons remain in a single line?
I am uncertain about the approach to take using CSS in this scenario.
What would be the best practice when incorporating CSS and CSS frameworks with ReactJS?
I currently utilize a global style.css and Bootstrap.