CODEWITHSUNDEEP
cssreactjscomponents
Chris
Chris

Reputation: 117

React component rendering without overlay

Hey I am pretty new to React and I have a misunderstanding about the rendering of my components so if I use two different components in another to render them e.g. in a page they will always overlap. 

export class PageComponent extends Component {
  render() {
    return (
      <div className="container">
        <TripForm />
        <br />
        <TinyEditor />
      </div>
    );
  }
}

but I want them to align underneath each other as they were written as only one component respecting each other as content blocks. So where's my mistake or misunderstanding about components can anybody explain?

Upvotes: 1

Views: 279

Answers (1)

Red Baron
Red Baron

Reputation: 7682

they will behave stylistically as you tell them too

you have this

export class PageComponent extends Component {
  render() {
    return (
      <div className="container">
        <TripForm />
        <br />
        <TinyEditor />
      </div>
    );
  }
}

if tripForm and TinyEditor are div components they will behave as such and essentially will be the same as this

export class PageComponent extends Component {
  render() {
    return (
      <div className="container">
        <div />
        <br />
        <div />
      </div>
    );
  }
}

there will never be overlap unless you tell it to in your CSS

if you want them to align them, apply css to this class .container

.container { display: 'flex', flexDirection: 'column' } should be a start

Upvotes: 1

Related Questions