Unveiling the Art of Styling a Reactjs Component with CSS

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.

Answer №1

It is recommended to enclose all button elements within a common div container, assign a unique class to the container, apply a modifier class to its children when they are activated, and if you desire to animate the visibility of the boxes, consider keeping them hidden instead of unmounting them when another button is selected to prevent React from abruptly displaying them.

Answer №2

When it comes to styling, I prefer using inline style tags. It's all about personal preference. Through experimentation, you'll find the approach that works best for you and your specific projects. An inline style tag is structured like this:

<div style={{ display: 'flex', width: '100%', backgroundColor: 'red' }}></div>
. One advantage of this method is that you can keep styles contained within the component itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic scene with three.js within an HTML div element

I've been searching for solutions but can't seem to figure it out for this particular scenario. https://codepen.io/rkimo/pen/vdwxJj Essentially, I just want to include this blob in a div so that I can add content before and after it and be able ...

Numerous links were chosen and multiple div elements were displayed on the screen

Currently, I have a setup where selecting one div will show its content. However, I am looking to enhance this by allowing multiple divs to be displayed simultaneously. For example, if 'Div 1' is selected and shown, I want the content of 'Di ...

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

Is there a method to trigger click events on overflow content when clicked?

I am currently tackling a significant issue: I need the drop-down options' width to be wider than where the selected value is displayed, especially in IE7. After conducting some research on Google, I decided to take matters into my own hands and write ...

How can I make an imported component observable with MobX?

In my current code, I am utilizing an external library called antd for rendering tables. I am facing an issue where the imported component does not re-render when the store state changes. This is because the component is not observable and relies on data p ...

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...

`Unable to update the checked prop in MUI switch component`

The value of RankPermission in the switchPermission function toggles from false to true, but for some reason, the MUI Switch component does not update in the browser. I haven't attempted any solutions yet and am unsure why it's not updating. I&ap ...

Tooltips will display on all Nivo charts except for the Nivo Line chart

I'm having an issue with nivo charts where the tooltip isn't showing up for my line chart. Even after copying and pasting the example from here: Other chart examples work fine with tooltips appearing, but for some reason, it's just not work ...

Eliminate inner margin from the canvas of a bar chart created with ChartJS

I am looking to use Chart.js to create a single stacked bar chart that visualizes progress towards a specific financial goal. I have added a dotted line on top of the chart to represent this goal amount. The issue I am facing is that there is unwanted pad ...

Div element to animate and vanish in a flash

I'm attempting to create a smooth slide effect for a div element before it disappears. Below is the code I am currently using: function slideLeft(element) { $("#" + element).animate({ left: "510" }, { duration: 750 }); document.getEle ...

Issue encountered: The React Material-ui library reported an error when `active` attribute received a value of `true` instead of a boolean while utilizing the

After upgrading from material-ui v 0.x to material-ui v3.9.3, I encountered a strange compile time error related to the Stepper Component Although the code runs smoothly in CodeSandbox, it throws an error (Refer to the screenshot) when executed elsewhere. ...

Differences between Array `forEach` and `map()`

I am having trouble displaying the options list even though I am passing an array. Any assistance would be greatly appreciated. Thank you. const options_A = [ { label: "AA", value: "AA" }, { label: "BB", valu ...

How can I implement changing the page background color based on different routes in ReactJS and React Router?

Is there a way to change the background color of the browser when navigating to a new route in ReactJS and React Router? Check out my tips below that I discovered during my experimentation: I have managed to implement this on individual page views using & ...

I'm looking to replicate the header design of the classic olx website. Is there anyone who can guide me on how to extend the search bar to match the original image?

Could use some help stretching my search input field to match the original picture. Any tips or suggestions on how to achieve this? I'm utilizing bootstrap and react.js for this project. Uploaded are the original image and my resulting image for compa ...

Using jQuery to toggle visibility on click within WordPress

Looking for a way to make three buttons change color on hover and display different content when clicked? You're not alone! Despite searching through tutorials and forums, the solution remains elusive. The buttons are structured like this: <div i ...

Adjust the height of the element to match the parent's height

I am working on a design with a structure like this: <section> <h3>Title:</h3> <p>Content that may span multiple lines.</p> </section> section { background: #5E5E5E; overflow:hidden; } h3 { backgro ...

How can you make the dropdown list in Autocomplete Material-UI open by default?

In a customized form, the information related to countries and their corresponding codes is visually presented. Rather than waiting for user focus, the drop-down list populates automatically with an array of preloaded data. Take a look at the sample code p ...

Using CSS to design a table-like structure with rows that span multiple columns

I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...

Stop jQuery from resetting the background image when using fadeOut()

Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-posit ...

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...