Use css class to place react component in the layout

Question

I got the following components


|-- App
    |-- Components
        |-- WidgetMenu
        |-- Editor

I want to place WidgetMenu component in 3 locations in App as below.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 1fr;
  grid-template-areas: 
  "left center right"
  "bottom bottom bottom";
  
  height: 100vh;
}

.left {
  grid-area: left;
  background: green;
  color: white;
}

.right {
  grid-area: right;
  background: green;
  color: white;
}

.bottom {
  grid-area: bottom;
  background: green;
  color: white;
}

.center {
  grid-area: center;
}

.container > div {
  border: 2px solid black;
}

<div class="container ">
  <div class="left">WidgetMenu Left</div>
  <div class="right">WidgetMenu Right</div>
  <div class="bottom">WidgetMenu Bottom</div>
  <div class="center">Editor</div>
</div>

To do that, I'm using css class as follows.

render() {
    return (
        <div className="App">
            <WidgetMenu className="left" />
            <WidgetMenu className="right" />
            <WidgetMenu className="bottom" />
            <Editor className="center" />
        </div>
    );
}

But I can not pass a className because there is no such property requested by WidgetMenu. So how this should be done? What would be the proper way? Do I have to wrap every react component by divs and use className on them?

Why not pass className as props to the WidgetMenu? <WidgetMenu classToApply={"left"} /> — Anurag Srivastava
– Anurag Srivastava, Commented May 13, 2019 at 14:31
@AnuragSrivastava Or he / she can just use the prop className :) — Mosh Feu
– Mosh Feu, Commented May 13, 2019 at 14:35
Layouting is done on App component by App.css style sheet. There is no real use of the class name inside WidgetMenu. That's why I want to know if there is any other way. — s1n7ax
– s1n7ax, Commented May 13, 2019 at 14:35
You can't use the className on a component because it has no DOM, so you have a DOM element to apply the class on. But you can split the code. The parent (App) will contains the styles which relevant to it and in Widget.css put the styles which relevant to the widgets.. — Mosh Feu
– Mosh Feu, Commented May 13, 2019 at 14:38
@AnuragSrivastava @MoshFeu even if i define a prop called className react just take it as a regular prop value. <WidgetMenu className="left" /> — s1n7ax
– s1n7ax, Commented May 13, 2019 at 14:43

Avanthika · Accepted Answer · 2019-05-13 14:39:17Z

1

If you are doing this in your parent component,

render() {
    return (
        <div className="App">
            <WidgetMenu className="left" />
            <WidgetMenu className="right" />
            <WidgetMenu className="bottom" />
            <Editor className="center" />
        </div>
    );
}

In the child component (WidgetMenu & Editor components), you have to apply it this way:

render() {
    return (
        <div className={this.props.className}>WidgetMenu {this.props.className}</div>
    );
}

answered May 13, 2019 at 14:39

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use css class to place react component in the layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related