Why is my column component not being displayed as expected?

Question

I want to use <Row> and <Col> Components to arrange the content on my Website. However, the content is not being displayed as expected... :(

What am I doing wrong?

Here is my App.tsx class:

import "./App.css";
import DropdownMenu from "./components/DropdownMenu";
import TextBox from "./components/TextBox";
import { Component } from "react";
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';


interface AppProps { }

interface AppState { selectedCurrency: string }

class App extends Component<AppProps, AppState> {

  constructor(props: AppProps) {
    super(props)
    this.state = { selectedCurrency: "EUR" }
  }

  private getData = (val: any) => { this.setState({ selectedCurrency: val.value }) }

  render() {
    return (
      <div>
        <DropdownMenu sendData={this.getData} defaultValue="Currency" values={[{ label: "EUR", value: "EUR" }, { label: "GBP", value: "GBP" }, { label: "USD", value: "USD" }]} ></DropdownMenu>
        <DropdownMenu sendData={() => ""} defaultValue="Coin" values={[{ label: "Bitcoin", value: "Bitcoin" }, { label: "Etherum", value: "Etherum" }, { label: "Cardano", value: "Cardano" }, { label: "Polkadot", value: "Polkadot" }, { label: "Litecoin", value: "Litecoin" }, { label: "Enjin", value: "Enjin" }, { label: "Chilliz", value: "Chilliz" }, { label: "Vetchain", value: "Vetchain" }]} ></DropdownMenu><br></br>
        <TextBox title="Coinbase" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
        <Row>
          <Col>
            <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
          </Col>
          <Col>
            <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
          </Col>
        </Row>
// NEW LINES START
        <Container>
          <Row>
            <Col>1 of 2</Col>
            <Col>2 of 2</Col>
          </Row>
        </Container>
// NEW LINES END
      </div >
    );
  }
}
export default App;

And here is the result: Output in my browser

Answer 1

What I identify as the issue is that the width attribute of your <Col> is a the one of the <Row>. In general this is happening when you forget the <Container>.

Try this:

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

So your code should be something like this:

render() {
    return (
        <Container>
            <DropdownMenu sendData={this.getData} defaultValue="Currency" values={[{ label: "EUR", value: "EUR" }, { label: "GBP", value: "GBP" }, { label: "USD", value: "USD" }]} ></DropdownMenu>
            <DropdownMenu sendData={() => ""} defaultValue="Coin" values={[{ label: "Bitcoin", value: "Bitcoin" }, { label: "Etherum", value: "Etherum" }, { label: "Cardano", value: "Cardano" }, { label: "Polkadot", value: "Polkadot" }, { label: "Litecoin", value: "Litecoin" }, { label: "Enjin", value: "Enjin" }, { label: "Chilliz", value: "Chilliz" }, { label: "Vetchain", value: "Vetchain" }]} ></DropdownMenu><br></br>
            <TextBox title="Coinbase" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
            <Row>
                <Col>
                    <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
                </Col>
                <Col>
                    <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
                </Col>
            </Row>
        </Container>
    );
}
}